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

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