如何在网格布局中将引导下拉菜单和其他下拉菜单对齐？

I am trying to create filters whose layout should match something like below screenshot.

So far I am able to achieve something like the given below screenshot.

问题是我无法在空间上均匀分布项目，如第一个屏幕截图所示。使用表格创建这种布局也是好方法吗？

请帮助我理解和创建这个布局。

下面是我的代码

<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 &lt; </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 有大量的时间致力于将所有“风格元素”制作成类，并使用它们。尽管很直白，但请阅读文档 http://getbootstrap.com/当遇到困难时，它确实可以帮助你。

除此之外，让我们陷入你的问题。 如果你确实需要使用table然后在你的面板中，最佳实践 http://getbootstrap.com/components/#panels-tables就是把它放在下面或前面.panel-body但由于我们希望为所有未来的项目维护响应式移动优先技术，因此请尽量避免使用它，除非您确实想要一个数据表。嵌套列 http://getbootstrap.com/css/#grid-nesting是维持这一点的最佳实践。

如何嵌套任何列的一个示例是使用.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 http://www.bootply.com/BDzD0V3OsH

对于样式复选框，请查看很棒的 Bootstrap 复选框 https://github.com/flatlogic/awesome-bootstrap-checkbox，他们的完整文档可以在他们的 github 上找到。

Edit（全宽下拉菜单）-- 要使下拉菜单与按钮的宽度匹配，请将以下 css 代码添加到您的重写样式表中。

.open>.dropdown-menu {
      min-width: 100%;
}

希望我有帮助；）