【问题标题】：Issue when aligning the drop down boxes using bootstrap使用引导程序对齐下拉框时的问题
【发布时间】：2016-01-06 18:30:41
【问题描述】：

我在我的应用程序中使用引导程序。我有一个表单，其中包含多个内联放置的下拉框。包含表单的容器的宽度为col-lg-12，占据了整个屏幕。由于下拉列表中的数据，最后两个下拉列表显示在第二行。我尝试将select 框的max-width 属性赋予50%。下拉宽度减小，但边距保持不变。我不擅长引导。请让我知道我哪里出错了。我在下面发布代码：

<form novalidate role="form" name="filterForm" class="form-inline">
  <div ng-repeat="criteria in criterias">
    <div class="m-b">
       <div class="form-group s-b">
         <span>Country</span>
           <select class="form-control" ng-options="item for item in country" name="country" ng-model="classification.country">
           </select>
         </div>
         <div class="form-group s-b">
           <span>State</span>
             <select ng-options="item for item in state" class="form-control" name="state" ng-model="criteria.state"  style="max-width:50%">
             </select>
          </div>
          <div class="form-group s-b">
            <span>City</span>
              <select class="form-control"  ng-options="item for item in Cities"  name="account" ng-model="criteria.city" style="max-width:50%;">
              </select>
          </div>
          <div class="form-group s-b">
            <span>Predicate</span>
            <select class="form-control" name="account" ng-model="criteria.predicate">
               <option value="matches">Matches</option>
               <option value="not-matches">Not Matches</option>
             </select>
           </div>
           <div class="form-group s-b">
             <span>Value</span>
             <select class="form-control" name="account" ng-model="criteria.value"  style="min-width:100px;">
             </select>
           </div>
           <div class="form-group">
             <span>
               <button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
               </button>
               <button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
                        class="fa fa-minus"></i></button>
             </span>
           </div>
         </div>
       </div>
       <button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit
                <i class="fa fa-check"></i></button>
       <button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset
                <i class="fa fa-reply"></i></button>
     </form>

【问题讨论】：

标签： css angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

尝试添加类

由于您的数据太大，您应该尝试添加一个修改下拉列表位置的类，因为它们是绝对的，它们应该很容易移动到您想要的位置。

bootsraps 列系统说明

如果您将班级设置为col-xs-12，它将从移动设备到大型桌面一直是公牛宽度

如果你将你的类设置为col-xs-12 col-lg-6，那么 xs、sm 和 md 都将是全角，而 lg 将是半角。

尝试使用shoe lace 为您的列设置建模。

注意

您应该查看ui.bootstrap，因为您使用的是 angular.js。它删除了 jQuery 的使用，因此您不会遇到任何兼容性问题或奇怪的错误。

【讨论】：