Html div行不'；t不要将所有按钮正确对齐

我有以下代码：

生成报告






回到记分卡

正确显示如下：

但当我添加以下代码时：

电子邮件报告

它完全打破了我所有按钮的对齐方式，显示如下：

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

生成报告





电子邮件报告
回到记分卡

---

我希望“生成报告”、“电子邮件报告”和“返回记分卡”按钮都位于同一行。

尝试将最后一个按钮的偏移量设置为7。其思想是，由于一行中有12列，并且您有

col-md-2

和

col-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>

生成报告






电子邮件报告
回到记分卡