Question

我正试图接手Bootstrap 3而且我正在努力争取新的网格类。以前版本的Bootstrap允许您通过添加span- *类来设置输入的宽度，因此如果您想在同一表单列上放置两个输入，则添加span-2和span-10可以完成工作。我正在尝试使用bootstrap 3执行此操作，但是我没有得到与此fiddle中相同的结果，我想在同一列上设置select和输入。我希望标签位于输入的顶部，因此将inline class添加到表单不起作用。

我在这里缺少什么？

提前干杯和谢谢

Answer 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%;
}

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

1 个答案:

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