关于Bootstrap Grid系统 [英] About Bootstrap Grid system

问题描述

我对Bootstrap 3.3.5的源代码中的这部分代码感到困惑

I'm confused about this part of code in the source code of bootstrap 3.3.5

/*line 1585 - 1590*/
.container {
  padding-right: 15px;
  padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
  margin-right: -15px;
  margin-left: -15px;
}

它们是用来干什么的?
-------------------------------
谢谢大家！
看完你的回答，这是我的看法:
1.在.container中添加填充使.container的内容远离boodary;
2.但这意味着现在第一个/最后一个col距边界有2个填充，不是很好.因此，添加.row负边距将其扩展到边界.
我说的对吗?
顺便说一句，我问这个问题是因为我不知道是否删除这两个规则是有区别的.

what are they used for?
-------------------------------
Thanks guys!
This is my opinion after reading your answers：
1.Add padding to the .container makes the content of .container away from the boudary;
2.But this means now the first/last col is 2 paddings away from the boundary,not so nice. So add .row negative margin to streach out it to the boundary.
Am I right?
btw,I asked this question because I dnt see the difference whether I delete these two rules or not.

推荐答案

行应始终放置在容器内，以确保适当的间距(页面内容与浏览器边缘之间).如果您未在容器内放置一行，则会导致水平滚动条.该行的宽度将大于视口的宽度.

Rows should always be placed inside of a container to ensure proper spacing (between page content and the edge of the browser). If you don’t put a row inside a container, the row will be wider than the width of the viewport, causing a horizontal scrollbar.

Bootstrap行使用负边距抵消容器的填充.最终结果是在容器内行的侧面没有可见的间距(边距或填充).这对于响应式设计以确保均匀的间距非常重要，因为各列可能会垂直包裹或堆叠(更改每行中显示的列数).

The Bootstrap row uses negative margins to counteract the padding of the container. The end result is no visual spacing (margin or padding) on the sides of the row within the container. This is important for responsive designs to ensure even spacing since the columns may wrap or stack vertically (changing the number of columns displayed in each row).

引导程序4 中也是如此.

另请参阅:
引导行和列-我需要使用行吗?
Bootstrap网格如何工作

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