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

Question

使用 bootstrap 网格时，垂直间距和最左边和最右边的间距为 15px，但列之间的间距为两倍:30px。

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

Answer 1

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

只需确保新间距周围的 .row 具有负的左右边距，等于列左侧和右侧的填充。就像所有 float 元素一样，此网格与 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>