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

Question

我正在使用引导程序的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此按钮的white-spsace: normal设置，因此，如果按钮上的文本较长（大于列），则文本将下一行。 像这样：

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