使用Bootstrap3在输入之间留出空间

Question

我有一个使用Bootstrap 3和AngularJS的单页应用程序，我不想使用日期选择器来选择日期，我想使用2个输入到日期和年份，而另一个用于月份。

我打印日期字段的div是：

            <div class="col-md-8">
               <div class="row">
                   <label>Start date</label>
               </div>
               <div class="row">
                   <div class="col-md-3">
                      <input type="text" name="day" class="form-control" placeholder="Day"/>
                    </div>
                    <div class="col-md-6">
                        <select class="form-control">
                            <option>Month</option>
                            <option>January</option>
                            <option>Febrary</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="text" name="" class="form-control" placeholder="Year"/>
                    </div>
                </div>
            </div>

我怎样才能更好地展示这个？正如您所看到的那样，标签对齐是错误的，并且字段之间的空间非常大。

Answer 1

标签具有不同的对齐方式，因为它不在列

中

列之间的空间称为装订线。 默认情况下，bootstrap在每列的左侧和右侧有15px。 因此，第一列的左侧间距为15px，列之间的间距为30px。

http://getbootstrap.com/css/#grid

您可以如前所述更改默认边距，但这会对整个网格产生影响。也许你应该冒险看一下bootstrap表单的例子：

http://getbootstrap.com/css/#forms

Answer 2

查看网格系统文档。你没有像往常一样筑巢.row会给你一个负余量。您可以按如下方式修改css以执行所需操作：

DEMO：http://jsbin.com/qukema/1/edit

您也可以使用.form-group而不是.row，但更改下面的CSS。

<强> CSS：

@media (max-width:991px) {
    .v-space {margin:5px 0;}
}

.custom-form [class*="col-"] {
    padding-left: .5%;
    padding-right: .5%;
}
.custom-form.row {
    margin-left: -.5%;
    margin-right: -.5%;
}

<强> HTML

 <div class="container">
     <!-- do not nest containers but if you use row, there must be a .container parent -->
     <form role="form">
        <label>Start date</label><!--no grid class required -->
        <div class="row custom-form">
           <div class="col-md-3 v-space">
              <input type="text" name="day" class="form-control" placeholder="Day"/>
           </div>
           <div class="col-md-6 v-space">
              <select class="form-control">
                 <option>Month</option>
                 <option>January</option>
                 <option>Febrary</option>
              </select>
           </div>
           <div class="col-md-3 v-space">
              <input type="text" name="" class="form-control" placeholder="Year"/>
           </div>
        </div>
     </form>
  </div>