html - 如何防止元素溢出其列宽？

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;">