Question

简单的问题：我希望看到具有最大宽度的内部元素 P.S。我正在使用Twitter Bootstrap 3.3.0。它支持.container-fluid

<div class="row form-group form-inline">
   <div class="container-fluid">
      <input type="text" class="form-control" name="1">
      <input type="text" class="form-control" name="2">
      <input type="text" class="form-control" name="3">
   </div>
</div>

元素似乎没问题，我只想让他们每个人以宽度分享％33.3 其他信息：我不想尝试以下示例，因为

之间的空间太大了

<div class="row form-group form-inline">
   <div class="container-fluid">
      <div class="col-sm-2">
         <input type="text" class="form-control" name="1">
      </div>
      <div class="col-sm-2">
         <input type="text" class="form-control" name="2">
      </div>
      <div class="col-sm-2">
          <input type="text" class="form-control" name="3">
      </div>
   </div>
</div>

提前致谢。

Answer 1

将col-sm-xx直接添加到输入字段不会起作用，因为bootstrap本身将使用width:auto覆盖宽度。

您需要将输入放在列中。它是父容器col-sm-4的{{1}}。此外，输入需要33%来填充整个列。

＆＃13;

100% width

＆＃13;

.form-inline [class*=col] {
  padding: 0;  
}
.form-inline input.form-control {
  width: 100%;
}

＆＃13;

Twitter Bootstrap液体容器，包括maxwidth元素

1 个答案: