div行不能正确排列所有按钮

问题描述 投票:0回答:1

我有以下代码。

<div class="row">
  <div class="col-md-2">
    <div class="dropdown">
      <button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Generate Report <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
        <li>
          <a href="#" data-bind="reportExportTypeText: exportType, click: $root.OnGenerateReportClick.bind($root, exportType)"></a>
        </li>
      </ul>
      </br>
    </div>
  </div>

  <div class="col-md-offset-8 col-md-2">
    <button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
  </div>
</div>

显示正确的是这样的

first piece of html rendered

但是当我添加以下代码时

<div class="col-md-1">
  <button type="button" class="btn btn-bee-space-blue buttonWidth"  data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' },
    enable: ReportingEditEnabled"> Email Report</button>
</div>

它完全破坏了我所有按钮的对齐方式,它显示的是这样的。

broken alignment

以下是包含按钮的完整代码

<div class="row">
  <div class="col-md-2">
    <div class="dropdown">
      <button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Generate Report <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
        <li><a href="#" data-bind="reportExportTypeText: exportType, click: $root.OnGenerateReportClick.bind($root, exportType)"></a></li>
      </ul>
      </br>
    </div>
  </div>

  <div class="col-md-1">
    <button type="button" class="btn btn-bee-space-blue buttonWidth"  data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' }, 
            enable: ReportingEditEnabled"> Email Report</button>
  </div>

  <div class="col-md-offset-8 col-md-2">
    <button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
  </div>
</div>

我想让我的... 生成报告, 电子邮件报告返回记分卡 按钮都在同一行。

html css twitter-bootstrap
1个回答
1
投票

尝试将最后一个按钮的偏移量设置为7。我们的想法是,由于一行有12列,而你有一个叫 col-md-2col-md-1 (左边的按钮),你还有9列到行的最后。而如果最后一个按钮的宽度是2列,那么它和其他两个按钮之间还剩下7列作为偏移。

<div class="row">
  <div class="col-md-2">
    <div class="dropdown">
      <button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        Generate Report <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
        <li><a href="#"
            data-bind="reportExportTypeText: exportType, click: $root.OnGenerateReportClick.bind($root, exportType)"></a>
        </li>
      </ul>
      </br>
    </div>
  </div>


  <div class="col-md-1">
    <button type="button" class="btn btn-bee-space-blue buttonWidth" data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' }, 
      enable: ReportingEditEnabled"> Email Report</button>
  </div>

  <div class="col-md-offset-7 col-md-2">
      <button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.