Question

我正在构建一个使用Bootstrap 3的应用程序。在这个应用程序中，我有一个表单。表格如下所示：

<form>
  <div class="container">
    <div class="row">
      <div class="col-md-6"><h2>Contact Details</h2></div>
      <div class="col-md-6 text-right">
      <br />
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6" style="border:1px dashed #eee; background-color:beige;">
      <div class="form-group">
        <label for="emailAddress">Email Address</label>
        <input type="text" class="form-control" id="emailAddress" />
      </div>                
    </div>

    <div class="col-sm-6" style="border:1px dashed #eee; background-color:beige;">
      <div class="form-group">
        <label for="phoneNumber">Phone Number</label>
        <input type="text" class="form-control" id="phoneNumber" />
      </div>
    </div>
  </div>
</form>

上面的表格带有标题。在它下面，米色的行在左右两侧伸出。基本上，一行是1170px。我需要使用网格系统。但是，我还需要包括列边界和颜色。这导致了这个问题。列和行需要与表单标题的定位一致。我怎么能用bootstrap做到这一点？

基本上，我想要这个：

Contact Details

+------+------+------+------+------+------+------+------+------+------+------+------+
|      |      |      |      |      |      |      |      |      |      |      |      |
+------+------+------+------+------+------+------+------+------+------+------+------+
|      |      |      |      |      |      |      |      |      |      |      |      |
+------+------+------+------+------+------+------+------+------+------+------+------+

然而，我得到了这个：

   Contact Details

+------+------+------+------+------+------+------+------+------+------+------+------+
|      |      |      |      |      |      |      |      |      |      |      |      |
+------+------+------+------+------+------+------+------+------+------+------+------+
|      |      |      |      |      |      |      |      |      |      |      |      |
+------+------+------+------+------+------+------+------+------+------+------+------+

Answer 1

Bootstraps行左边和右边的边距为15px，col-md-6类的两边填充为15px：

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.row {
    margin-left: 15px;
    margin-right: 15px;
}

因此，如果你想要摆脱每边30px，只需将你的div设置为padding: 0，将行div设置为margin: 0，你就可以拥有它。

Answer 2

理想的优雅解决方案需要一个父选择器，它还不存在于CSS中，但确实存在于jQuery中。话虽如此，就你提供的代码而言，这会将你的标题向左移动15px以抵消Bootstrap添加的固有填充：

.col-md-6 h2 {
    margin-left: -15px;
}

如何将我的标题与Bootstrap中的后续行对齐？

2 个答案: