twitter-bootstrap – Bootstrap 3 Gutter Size

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap 3 Gutter Size前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚刚开始使用引导,不确定如何实现我的目标。 @H_502_2@我想让水槽都是平的,就像他们在这个形象:

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

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

解决方法

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

@H_502_2@更新

@H_502_2@为了回应@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>
@H_502_2@在嵌套的情况下,操作.row类确实影响子网格。良好或过错取决于您对子网的期望/要求。更改.row的边距不会破坏子网格。

@H_502_2@默认:

@H_502_2@.row类的边缘

@H_502_2@有:

.row {
    margin-left: 0;
    margin-right: 0;
}
@H_502_2@填充容器类

@H_502_2@有:

.container {
    padding-left:30px;
    padding-right:30px;
}
@H_502_2@注意子网格不应该包含在.container类中。

原文链接:https://www.f2er.com/bootstrap/234221.html

猜你在找的Bootstrap相关文章