twitter-bootstrap – Bootstrap 3 Gutter Size

发布时间：2020-12-18 00:16:07 所属栏目：安全来源：网络整理

导读：我刚刚开始使用引导，不确定如何实现我的目标。我想让水槽都是平的，就像他们在这个形象：默认情况下，它们看起来像这样，柱之间的垂直沟槽(用蓝色标记)是水平和外部沟槽的两倍：任何帮助最好的方法来解决这个可能会不胜感激。解决方法尝试： .row { ma

我刚刚开始使用引导，不确定如何实现我的目标。

我想让水槽都是平的，就像他们在这个形象：

默认情况下，它们看起来像这样，柱之间的垂直沟槽(用蓝色标记)是水平和外部沟槽的两倍：

任何帮助最好的方法来解决这个可能会不胜感激。

解决方法

尝试：

.row {
    margin-left: 0;
    margin-right: 0;
}

每列的两边都有一个15像素的填充。这使得一个30pps之间的沟槽。
在sm网格的情况下，您的容器类将为970px(((940px @ grid-gutter-width)))。
每列的宽度为940/12。由此产生的@ grid-gutter-width / 2在两边
网格将以-15px的负边距隐藏;撤消这个负的左边距在网格的两边设置一个30像素的沟槽。这个沟槽是用15px的填充15px的静止网格空间构建的。

更新

为了回应@ElwoodP的答案，请考虑以下代码：

<div class="container" style="background-color:darkblue;">  
<div class="row" style="background-color:yellow;">
  <div class="col-md-9" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-9</div>
    <div class="row" style="background-color:orange;">
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
      <div class="col-md-6" style="background-color:red;">
        <div style="background-color:lightblue;">div 2: .col-md-6</div>
      </div>
    </div>
  </div>  
  <div class="col-md-3" style="background-color:green;">
    <div style="background-color:lightblue;">div 1: .col-md-3</div>
  </div>      
</div>
</div>

在嵌套的情况下，操作.row类确实影响子网格。良好或过错取决于您对子网的期望/要求。更改.row的边距不会破坏子网格。

默认：

.row类的边缘

有：

.row {
    margin-left: 0;
    margin-right: 0;
}

填充容器类

有：

.container {
    padding-left:30px;
    padding-right:30px;
}

注意子网格不应该包含在.container类中。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!