Bootstrap网格，具有均匀的垂直和水平空间

Question

当使用自举网格时，垂直空间和最左边的＆amp;右边是15px，但列之间的空格是双倍的：30px。

有没有办法在不更改Bootstrap CSS的情况下使它们也达到15px？

Answer 1

在不影响核心bootstrap.css的情况下更改装订线非常容易，并且仍然可以使用相同的类来推拉和偏移。

只需确保新排水沟周围的.row左侧和右侧的负边距等于列左侧和右侧的填充。就像所有浮动元素一样，这个网格，如Bootstrap网格，完全相同，每行仍然需要不超过12列，如果超过所有高度需要相等，或者您需要清除它们或使用其他方法，如作为jQuery或使它们具有相同的高度。

网格上没有垂直间距，任何垂直间距都来自列中的子节点，它通常是底边距值。

https://jsbin.com/wonuni/1/

<强> CSS

.row.grid-15-gutter {
    margin-left: -7.5px;
    margin-right: -7.5px;
}
.row.grid-15-gutter [class*="col-"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}
.panel {
    border: 1px solid red;
    padding: 10px;
    margin-bottom: 15px;
}

<强> HTML

<div class="container">

    <h2>Modified Grid</h2>

   <div class="row grid-15-gutter">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">2</div>
      </div>
   </div>
   <div class="row grid-15-gutter">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">3</div>
      </div>
   </div>

  <hr>


  <h2>Regular Grid</h2>


   <div class="row">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">2</div>
      </div>
   </div>
   <div class="row">
      <div class="col-sm-5">
         <div class="panel">1</div>
      </div>
      <div class="col-sm-7">
         <div class="panel">3</div>
      </div>
   </div>


</div>