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>如果没有空间，是否可以使用 a来选择您的选项？

如果所有其他方法都失败，您始终可以创建一个自定义类<div class="col-xs-12 fixed">并将宽度设置为静态值，可以是基值，也可以按照您的建议使用 JQuery 查找最长选项值的最大宽度。

希望有帮助！