【发布时间】：2015-10-05 21:56:19
【问题描述】：
我正在尝试在网格布局中对齐 7 个项目，以便每个元素都固定在它的位置，目前我能够实现如下图所示。这是相同代码的plunker（但有些在 plunker 上看起来不太好）。
我当前状态的问题是 minutes 被包装到第二行。另外，我如何利用 Agent: 标签区域和 Reset 按钮区域的额外空间，以便利用空间？
代码
<div class="row">
<div class="col-md-1" style="padding-right:0px; padding-left:0px; margin-top:5px">
<div ng-show="!loadinga">
<b>Agent: </b>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" style="background-color: #fff; border-color: #C3C3C3" type="button" id="dropdownMenu1" aria-expanded="true">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-left:0px;">
<div class="dropdown " ng-show="!loadinga">
<button class="btn btn-default btn-block dropdown-toggle whiteDropdown" ng-disabled="loading" type="button" id="dropdownMenu2" aria-expanded="true">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu" aria-labelledby="dropdownMenu2">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2" style="padding-right: 0px; padding-left:0px;">
<div ng-show="!loadinga">
<input id="autoComplete" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select="" placeholder="Search Tasks" typeahead-focus-first="true" ng-disabled="loading" type="text" ng-blur="" />
</div>
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px; margin-right:0px" align="right">
<input ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" type="checkbox" />
<label for="excludeMinutesStep" style="font-weight:normal">Exclude tasks running < </label>
<input id="excludeMinutesStep" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" type="number" /> minutes
</div>
<div class="col-md-2 divGridText" ng-show="!loadinga" style="padding-right: 0px; padding-left:0px;" align="centr">
<input id="datalabels" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" type="checkbox" />
<label for="datalabels" style="font-weight:normal;">Show Task Labels</label>
</div>
<div class="col-md-1 divGridImage" ng-show="!loadinga" align="center" style="padding-right: 0px; padding-left:0px;">
<button style="margin-left:3px" class="btn btn-custom" ng-click="">Reset</button>
</div>
</div>
更新
或者有没有办法保持 Agent: 标签并在同一行下拉而不用单独的 div 和 col-md-1 类给标签？
需要类似下面的截图
【问题讨论】：
-
这是全屏吗？还是盒装布局？例如。该导航栏是附加到屏幕左侧的侧边栏吗？
标签： html css angularjs twitter-bootstrap