我有以下代码。
<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>
显示正确的是这样的
但是当我添加以下代码时
<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="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>
我想让我的... 生成报告, 电子邮件报告 和 返回记分卡 按钮都在同一行。
尝试将最后一个按钮的偏移量设置为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>