两个输入相同的表单列采用所有单元格宽度 Bootstrap 3

Posted 2023-03-12

【中文标题】两个输入相同的表单列采用所有单元格宽度 Bootstrap 3

【英文标题】：Two inputs same form column taking all the cell width Bootstrap 3

【发布时间】：2014-01-14 23:55:11

【问题描述】：

我正在尝试使用 Bootstrap 3，但我有点为网格的新类而苦苦挣扎。以前版本的 Bootstrap 允许您通过添加 span-* 类来设置输入的宽度，因此如果您想将两个输入放在同一个表单列上，添加 span-2 和 span-10 就可以了。我正在尝试使用 bootstrap 3 执行此操作，但我没有得到与您在此 fiddle 中看到的相同的结果，我想将选择和输入设置在同一列上。我想要输入顶部的标签，因此将inline class 添加到表单中不起作用。

我在这里缺少什么？

提前致谢

【参考方案1】：

http://jsbin.com/esewOyo/1/

大多数人无法相信涉及多少类，但表单控制始终是 100%，因此每个类都必须进入 col-- 类，如果您想将元素放在同一个类中行，在这种情况下，您将使用带有列的嵌套行，如下所示：

<div class="container">
 <form role="form">
  <div class="row my-row">
   <div class="col-sm-4">
    <div class="row">
     <div class="col-xs-6">
      <div class="form-group">
       <label>C-Band</label>
       <select class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option>
       </select>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="form-group">
       <label>&nbsp;</label>
       <input type="text" class="form-control">
      </div>
     </div>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
  </div>
 </form>
</div>

因为排水沟对我来说太宽了：

.row.my-row, .row.my-row .row 
  margin-left:-1%;
  margin-right:-1%


.row.my-row [class*="col-"] 
 padding-left: 1%;
  padding-right: 1%; 


.row.my-row .row [class*="col-"] 
  padding-left: 1%;
  padding-right: 1%;