Bootstrap 3 装订线尺寸 [英] Bootstrap 3 Gutter Size

查看：18
本文介绍了Bootstrap 3 装订线尺寸的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚开始使用 bootstrap，不确定如何实现我的目标.

我希望排水沟都是均匀的，就像它们在这张图片中一样:

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

任何有关解决此问题的最佳方法的帮助都可能会受到赞赏.

解决方案

尝试:

.row {左边距:0；右边距:0;}

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

更新

针对@ElwoodP 的回答，请考虑以下代码:

<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 class="col-md-6" style="background-color:red;"><div style="background-color:lightblue;">div 2: .col-md-6</div>

<div class="col-md-3" style="background-color:green;"><div style="background-color:lightblue;">div 1: .col-md-3</div>

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

默认:

.row 类的边距

与:

.row {左边距:0；右边距:0;}

.container 类的填充

与:

.container {填充左:30px；填充右:30px;}

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

I've only just started working with bootstrap and unsure about how to achieve my goal.

I would like the gutters to all be even, like they are in this image:

by default, they look like this, the vertical gutters in between columns (marked with blue) are double the horizontal and outside gutters:

Any help on the best way to solve this probably would be appreciated.

解决方案

try:

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

Every column have a padding of 15 px on both sides. Which makes a gutter between of 30 px. In the case of the sm-grid your container class will 970px (((940px + @grid-gutter-width))). Every column get a width of 940/12. The resulting @grid-gutter-width/2 on both sides of the grid will be hide with a negative margin of - 15px;. Undoing this negative left-margin set a gutter of 30 px on both sides of the grid. This gutter is build with 15px padding of the column + 15 px resting grid space.

update

In response of the answer of @ElwoodP, consider the follow code:

<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>

In the case of nesting, manipulation the .row class indeed influences the sub grid. Good or fault depends on your expectations / requirements for the subgrid. Changing the margin of the .row won't break the sub grid.

default:

margin of the .row class

with:

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

padding of the .container class

with:

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

Notice sub grids shouldn't wrapped inside a .container class.

这篇关于Bootstrap 3 装订线尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆