Bootstrap 3选择切断选项

Question

有没有办法防止选项＆＃34;截止＆＃34;在Bootstrap上选择？请参阅下面的代码和随后的图片。第1张图显示了正确显示的选项。第二张图显示了在我将屏幕宽度调整为小于选项文本后切换选项。

如果我不能通过CSS执行此操作，我计划使用jQuery将选择框的宽度设置为最大选项宽度，如果选项宽度大于选择宽度。< / p>

<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查找最长选项值的最大宽度

希望有所帮助！