Twitter Bootstrap 3：设置Select元素宽度匹配容器宽度

嘿，我来帮你解决这个问题！你现在的问题出在input-xlarge这个类上——它是Bootstrap里的固定宽度类，所以不管父容器多大，select框只会保持它预设的宽度，没法自动填满col-md-6的蓝色区域。下面给你几个实用的解决方案：

方法1：用Bootstrap原生的form-control类（最推荐） #

直接把input-xlarge换成form-control就搞定了，这个类是Bootstrap专门为表单控件设计的，默认就会设置width: 100%，刚好能填满父容器的宽度，还自带统一的表单样式：

<div class="col-md-6">
  <select class="form-control">
    <option>...</option>
  </select>
</div>

方法2：自定义CSS覆盖固定宽度 #

如果你一定要保留input-xlarge的其他样式，那可以加个自定义类来强制设置宽度：
首先写一段CSS：

.full-width-select {
  width: 100% !important;
  box-sizing: border-box; /* 防止padding/border让元素超出容器 */
}

然后在HTML里给select加上这个类：

<div class="col-md-6">
  <select class="input-xlarge full-width-select">
    <option>...</option>
  </select>
</div>

这里的!important是为了覆盖input-xlarge里的固定宽度设置，确保样式生效。

方法3：全局修改input-xlarge样式（谨慎使用） #

如果你的整个项目里，所有用input-xlarge的元素都需要自适应宽度，那可以直接修改这个类的样式：

.input-xlarge {
  width: 100%;
  box-sizing: border-box;
}

不过这个方法要注意，会影响所有使用input-xlarge的元素，所以如果只是个别需要，还是用前两种方法更稳妥。

总的来说，方法1是最符合Bootstrap设计规范的，不用额外写CSS，一步到位～

内容的提问来源于stack exchange，提问作者Jebathon