具有均匀垂直和水平空间的引导网格

Posted 2023-03-06

【中文标题】具有均匀垂直和水平空间的引导网格

【英文标题】：Bootstrap grid with even vertical and horizontal spaces

【发布时间】：2015-02-10 12:12:32

【问题描述】：

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

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

【问题讨论】：

当您使用引导程序时，您绝不能更改 CSS ...但您可以创建自己的类和 css 文件来制作您想要的外观和感觉。

检查这个bootply.com/d54SBHG5FY

@Danko 这会破坏网格的响应能力

为什么？ ....我只是举个例子，但根据您的具体情况，您可以将该声明与媒体查询一起使用。

【参考方案1】：

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

只需确保新装订线周围的 .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>