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

Question

我正在努力掌握Bootstra3，而且我还在为新的网格类而挣扎。以前版本的Bootstrap允许您通过添加span-*类来设置输入的宽度，因此如果您想将两个输入放在同一个表单列上，那么添加span-2和span-10就可以完成这项工作。我试图用引导3来完成这个任务，但是我没有得到与您在这个小提琴中看到的相同的结果，我想在相同的col上设置select和输入。我希望将标签放在输入的顶部，这样将inline class添加到表单中就不能工作了。

我在这里错过了什么？

提前干杯和感谢

Answer 1

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

大多数人都无法相信涉及了多少类，但是表单控制总是100%，所以每个类都必须进入一个class，如果您想将元素放在同一行中，那么在这种情况下，您将使用一个嵌套行，列如下：

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