如何在网格布局中将引导程序下拉和其他人一起对齐？
我正在尝试创建过滤器，其布局应该与下面的屏幕截图类似。 
到目前为止，我能够实现类似下面给出的截图。 
问题是我无法按照第一张截图所示的空间均匀分配项目。 也是使用表创建这种布局的好方法吗？
请帮助我理解和创建此布局。
以下是我的代码
<div class="panel panel-default">
<div class="panel-heading" style="padding: 20px;">
<div class="panel-title pull-left text-label-emphasize" style="margin-top: -8px;"><b>Filter</b></div>
<div class="panel-title pull-right text-label" style="margin-top: -8px;">Reset</div>
</div>
<div class="panel-body">
<table width="100%">
<tr>
<td colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="agent in agentListData">
<a role="menuitem" href="#" ng-click="">{{agent}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div class="dropdown" ng-show="!loadinga" style="text-align: left;" width="100%">
<button class="btn btn-custom dropdown-toggle" type="button" style="text-align: left; background-color: #fff; border-color: #C3C3C3; " ng-disabled="loading">
{{dropDownAllTaskStatusTitle}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu scroll-menu nav" role="menu">
<li ng-repeat="task in taskStatusListData">
<a role="menuitem" href="#" ng-click="">{{task.title}}</a>
</li>
</ul>
</div>
</td>
<td align="left" colspan="1">
<div ng-show="!loadinga">
<input id="autoComplete" type="text" ng-model="selected" typeahead="task.name for task in taskList | filter:$viewValue | limitTo:20" class="form-control" typeahead-on-select='' placeholder="Search Tasks here" typeahead-focus-first="true" ng-disabled="loading" />
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr ng-show="isAdvancedFilterAvailable" class="fadein fadeout">
<td align="left" colspan="1">
<div style="margin-right: 5px;margin-left: 5px; margin-top:2px" ng-show="!loadinga">
<input type="checkbox" ng-model="isChecked" ng-click="checkboxClicked(isChecked)" ng-disabled="loading" />
<label for="excludeMinutesStep">Exclude tasks running < </label>
<input id="excludeMinutesStep" type="number" min="0" max="10" ng-disabled="!isChecked || loading" ng-model="excludeValue" ng-change="" size="2" style="width:40px" /> <b>minutes</b>
</div>
</td>
<td align="left" colspan="1">
<div style="margin-right: 5px; margin-top:2px" ng-show="!loadinga">
<input id="datalabels" type="checkbox" ng-model="isLabelShowChecked" ng-click="" ng-disabled="loading" />
<label for="datalabels">Show Labels</label>
</div>
</td>
<td colspan="1" style="padding-right: 200px"></td>
<td colspan="1" style="padding-right: 200px"></td>
</tr>
<tr style="padding:2px">
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<td colspan="4">
<a ng-show="!isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=true">Show Advanced Filters</a>
<a ng-show="isAdvancedFilterAvailable" ng-click="isAdvancedFilterAvailable=false">Hide Advanced Filters</a>
</td>
</tr>
</table>
</div>
</div>
CSS
.text-label {
color: #aab2bd;
font: 8pt;
}
.text-label-emphasize {
color: #575F64;
}
Bootstrap有数周的时间致力于将所有“样式元素”制作成类，并使用它们。 尽管如此，当卡住它真正可以帮助你时，请阅读文档。
除此之外，让我们陷入你的问题。 如果你真的需要在你的面板中使用table ，那么最好的做法是将它放置在.panel-body之下或之前，但是因为我们希望为我们所有未来的项目保留响应式移动优先技术，所以尽量避免它，除非你真的想要数据表。 嵌套列是保持这一点的最佳实践。
如何嵌套任何列的一个例子是使用.row然后是你希望嵌套的列大小，例如下面。
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"></div>
</div>
这将创建良好的断点并允许您为应用程序维护良好的UI / UX。
理解bootstrap的重要性并不能提供所有的答案，但它是一个很好的样式框架，所以我们重写了css更改。
我添加了一些css覆盖，使边框平方，并试图保持你的angular.js（你可能需要检查一下）
在bootply上托管预览的完成代码
对于样式复选框，请查看Awesome Bootstrap复选框，其完整文档可在其github上找到。
编辑 （全宽下拉菜单） - 要使下拉菜单与按钮的宽度相匹配，请将以下CSS代码添加到您的覆盖样式表。
.open>.dropdown-menu {
min-width: 100%;
}
希望我帮忙;）
链接地址: http://www.djcxy.com/p/26721.html上一篇: How to align bootstrap dropdown and others together in a grid layout?