Bootstrap 3選擇切斷選項

Question

有沒有辦法防止Bootstrap選擇中的選項“cut-offs”？ 請參閱下面的代碼和隨后的圖片。 第1張圖顯示了正確顯示的選項。 第二張圖顯示了在我將屏幕寬度調整為小於選項文本后切換選項。

如果我不能通過CSS做到這一點，我打算使用jQuery設置選擇框的寬度等於最大選項寬度，如果選項寬度大於選擇寬度。

<select class="form-control multiple" size="3">
    <option>test123 test123 test123 test123 test123 test123</option>
    <option>test123 test123 test123 test123 test123 test123</option>
</select>

Answer 1

我唯一能想到的是，由於Bootstrap容器本質上是響應式的，因此它們會根據瀏覽器的當前大小自動調整<input>的大小。 看看這個結構：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <input type="text" class="form-control" value="I am a very, very, very, very, very, very long option. I'm going to extend off the screen."/>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <select class="form-control">
        <option value="1">I am a very, very, very, very, very, very long option. I'm going to extend off the screen.</option>
      </select>
    </div>
  </div>
</div>

在此示例中，如果我們將窗口的大小調整得越來越小， <input>和<select>的寬度將調整為<div class="col-xs-12">容器的大小。 為了防止這種情況，我們需要使用固定寬度的輸入，這有點像使用像Bootstrap這樣的響應式框架，但我可以在某些情況下看到需要。

一些建議需要考慮：

• 是否可以使用較小的選項標簽？
• 您的<select>在最大寬度容器中？
• 如果沒有空間，是否可以使用<modal>選擇您的選項？

如果所有其他方法都失敗了，你總是可以創建一個自定義類<div class="col-xs-12 fixed">並將寬度設置為靜態值，可以是基值，也可以是建議使用JQuery查找最大寬度最長的期權價值。

希望有所幫助！