如何防止Element溢出其列宽？

Question

我正在使用bootstrap的12列网格系统（版本3）创建查询表单。布局包含下拉菜单，用户可以在其中选择项目。

问题： 当用户从下拉菜单中选择一个值时，该元素将溢出到下一列。是否有推荐的解决方案来纠正这个问题？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-1">
  </div>
  <div class="col-md-4">
    <input type="text" />
  </div>
  <div class="col-md-3">
    <div class="btn-group" uib-dropdown>
      <button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="">
        {{importTGModal.paramCondition1_selected}} 
        <span class="caret">
        </span>
      </button>
      <ul class="dropdown-menu" ng-click="importTGModal.setParamCondition1($event)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
        <li role="menuitem" ng-repeat="condition in importTGModal.paramConditions1">
          <a data-value={{condition}}>{{condition}}
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-4">
    <input type="text" />
  </div>
</div> 

Answer 1

这是因为下拉列表大于容器列。

请尝试以下方法之一：

1-（推荐）将下拉列表和输入文本放在同一列

中

2-使下拉列的列更大。与col-md-6

一样

3-（不推荐）Bootstrap类.btn添加white-space: nowrap;。将此按钮设置为white-spsace: normal，因此如果按钮具有长文本（大于列），则文本将中断到下一行。像这样：

<button id="btn-append-to-body" type="button" class="btn btn-secondary" uib-dropdown-toggle="" style="white-space: normal;">