如何让输入文本框铺满Bootstrap 3父列的全部宽度？

其实Bootstrap 3早就给我们准备了简洁的解决方案，不用手动写一堆CSS来适配，下面是几种常见场景的处理方法：

1. 核心方案：使用form-control类 #

这是官方推荐的标准做法，form-control类自带了width: 100%;和box-sizing: border-box;属性，既能让输入框自动铺满父容器宽度，又能避免内边距、边框导致的超出列范围问题。

示例代码：

<div class="container">
  <div class="row">
    <!-- 父列：占据6格栅格宽度 -->
    <div class="col-md-6">
      <label for="demoInput">输入框自动铺满父列</label>
      <input type="text" class="form-control" id="demoInput" placeholder="试试输入内容">
    </div>
  </div>
</div>

2. 解决自定义样式冲突 #

如果你给输入框加了自定义CSS，比如手动设置固定宽度width: 200px;或者浮动float: left;，可能会覆盖form-control的默认样式，这时候可以这么处理：

• 优先删除不必要的固定宽度、浮动等样式；
• 若必须保留自定义样式，通过更具体的选择器强制输入框宽度为100%：

/* 用更精准的选择器提升优先级，尽量避免使用!important */
.col-md-6 .form-control.my-custom-input {
  width: 100%;
  float: none;
}

3. 内联表单（form-inline）中的适配 #

如果输入框在form-inline内部，默认form-control会是width: auto，这时候可以结合栅格列类（比如col-xs-12）强制铺满：

<form class="form-inline">
  <div class="col-md-8">
    <input type="text" class="form-control col-xs-12" placeholder="在内联表单中也能铺满父列">
  </div>
</form>

4. 文本域（textarea）的适配 #

同样的逻辑，给textarea加上form-control类就能自动适配父列宽度：

<div class="col-md-4">
  <label for="demoTextarea">文本域示例</label>
  <textarea class="form-control" id="demoTextarea" rows="4" placeholder="这个文本域会铺满整个col-md-4列"></textarea>
</div>

总结一下：只要给输入类控件加上form-control，就能让它自动适配父Bootstrap列的宽度，这是Bootstrap官方设计的标准用法，尽量不要手动写width: 100%;，避免和框架样式冲突。

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