bootstrap row 之间的竖直方向的距离要怎么调整_百度知道
bootstrap row 之间的竖直方向的距离要怎么调整
提问者采纳
标签里了，可以通过css设置style=&这里的row还有其他含义行是写在&lt:25px&p&line-height
其他类似问题
为您推荐：
bootstrap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁bootstrap row 之间的竖直方向的距离要怎么调整_百度知道
bootstrap row 之间的竖直方向的距离要怎么调整
直接可以写 CSS，因为row只定义了横向的长度，数值的自己定义即可
彩虹在线，送给父母的礼物！
主营：通讯设备、产品、电脑、平板硬件和软件开发，手机应用
其他类似问题
为您推荐：
bootstrap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁bootstrap row 之间的竖直方向的距离要怎么调整_百度知道
bootstrap row 之间的竖直方向的距离要怎么调整
提问者采纳
直接可以写 CSS，因为row只定义了横向的长度，数值的自己定义即可
来自团队：
其他类似问题
为您推荐：
bootstrap的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345 - 推酷
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) - willian12345
这个标题取的有点奇怪，怪我翻译的有问题吧。英文学平有限，有道词典和google翻译齐上阵是必须的。还好翻译的不是小说，对于技术文章，还是能勉强翻过来的。
本文主要讲解了Bootstrap3.0的栅格布局系统实现原理，以及使用过程中应该注意的问题。
开始...翻译..
栅格系统原理这类东西本应该藏在帘子后面，你直接用就可以了，没必要去了解其背后的工作原理，除非你有了比较烂的设计或者一些比较复杂的东西，
当你无法找出
spacing,&margin,&padding
等这些补白全都乱的原因，那就真的很苦逼了，尤其是在某些动态改变和变化的
的栅格系统工作原理上我见过很多人都对它比较困扰、懊恼，每次都需要我解释很多遍后别人才能理解，
所以我乐意用快速和可视化的方式来解释为什么
栅格系统能玩得动，没必要解释很多。让我们一起找出
是如何利用巧妙的技巧实现栅格系统的
HTML正确的基本结构：
&div class=&container&&
&div class=&row&&
&div class=&col-xs-12&&&/div&
.container
、在响应式宽度上提供宽度约束。响应式尺寸的改变其实改变的是
都是基于百分比的所以它们不需要做任何改变；
以至于不内容不直为紧贴于浏览器边缘，两边都是
，下图中粉色的就是了，稍后解释更多；
在一个container中永远不需要再嵌一个container，记住永远不要。
你将会看到为什么
(Row)Class
提供了空间，理想上一行上分了
都向左浮时
也就扮演了容器角色，另外当浮动有问题时
也不会重叠
的两侧都拥有独特的负
15px&margin
如下图中蓝色部分
内边界与粉色区域重叠，但没超过。这负的
15px&margin
15px&padding
，并与之重叠，本质上讲就是负出去。为什么这么做呢？原因得看列
的工作原理，下面我们会看到
永远不要在
外面使用是无效的
列(col)现在有15px的padding了，如下图中黄颜色部分。Container的正padding值造成了15px的留空，row用负margin值反的延伸回去，
所以现在col的padding值与container的padding重叠了
永远不要在row外使用col,在row外使用col是无效的
Content&Within&a&Column
列(col)的padding给内容提供了空白，使内容不会紧贴在浏览器边界上，列之间有了padding才不会互相紧贴在一起。
container/row/column整这么些事儿最终要达到的结果就体现在这里了，就是为了col的补白啊...
Nesting嵌套
当你设置了container,row,column后，你可以在column内再创建新的栅格系统。你在右侧的列(col)内添加新的行(row)时不需再嵌container了
为什么嵌套时不需要新的container了？
这个技巧在于列(col)扮演了container一样的角色，列也有15px的padding值，它一样允许行(row)的负margin值,它内部的列、内容间的补白等都一样能很好的工作了
Offsets&偏移
偏移的实现相当简单，仅仅是在列(col)的左侧加上了margin值，
唯一比较怪的地方可能是在最左侧的col是从-15px的row的margin值开始偏移的，中间的列的偏移则是直接从前一个列开始偏移，分割分离出补白。
除此之外，偏移就表现的像列(col)一样
Push&and&Pull&列的排序
(直译过来应该是“推和拉”但实际使用过程中更多的表现为互换位置进行排序)
让我们先从为什么需要对列进行排序说起：基于响应式布局，对布局进行翻转，尤其是对移动设备上对列进行重新排列，
push&and&pull
允许你打破
从上到下从左到右的固定布局
可能让人比较困惑的是
的实现是通过添加
而不是通过添加
值。当然在添加
值之前它们的容器已经是相对定位了。
上图那么做就有问题，它会导致列重叠，而不像正常的列或者列偏移。
所以如果你
了一个列到右侧，它就会叠在右侧的列上，反之亦然。
所以一般我们总是“互换”，如果你
一个列到右侧，那么你得
右侧的列到左侧，或则也对右侧的列进行处理。
The&Reasoning&Behind&It&总结一下背后的原理
Container:
这样设计才让
的两侧拥有
值的补白，
另外，整个
值，这使整体上不会紧贴浏览器的边缘，当然如果对于满屏设计并带有背景色的
行(row)拥有负的margin值，并且值等于container的padding值，以至于边界与container得以重叠（相等）
，负的margin值叠在了padding上，这让row看起来没被container的padding所影响.为啥？自行脑补..
列(col)又拥有15px&的padding，所以能真正让content拥有15px的补白,而又让列之间拥有了15px+15px的中间补白，
正是因为如此，这个栅格系统不需要像960排版（blueprint,&等）系统似的对第一列或最生一列进行特殊的处理。
现在不管怎样在列之间都拥有15px的空白了。
Nested&Rows：
嵌套行的原理就像上面一样，只是它的重叠住了列的padding
，其实就把外面的列当作
本质上列扮演了
的角色，所以嵌套行时你不再需要
Nested&Columns:
嵌套列没什么好讲的了，和上面一样
偏移的本质就是分割空白间隔，通过增加空白间隔达到你想要的距离，非常的简单
Push/Pull:
用于主要用于变换左右列的位置，当你有一个特别的设计并且
偏移用着不给力的时候，你可以用它们来改变位置
Common&Problems
这里有些普遍会发生的
值得注意，一些
中很容易就能看出来
第一个容易产生
的地方是忘记添加
意味着没有
直相抵消，
意味着行会超出父元素。当元素处于浏览器边缘时，这是最普遍的造成奇怪的横向滚动的原因
第二个普遍问题是少了
产生的问题相反，
的边缘拥有了
比正常值多了一倍。而且你的列浮动也会产生问题。由于缺少了外面
的包裹，浮动没有得到正常的清除，所以浮动就可能产生问题。
同样，当你试图嵌套栅格系统时，同样新嵌进去的
离左侧的边距达到了
内的元素再嵌
container:
内任意元素内再嵌
会导致很多问题，如双倍的
值，空白间隔，怪异的横向滚动
偏移/push/pull:
当使用偏移或者排序
(push/pull),
偏移很简单不会出什么问题，
却不同，如果你
太多，列会超出它的
，记住只是使用正常的值主不会有问题
这些就是在使用
bootstrap3.0
的基础栅格系统时时产生的问题，如果你在设计里有很多的嵌套碰到问题，
或你的响应式布局没按照你所希望的方式工作，先看看上面这几点，是不是这些问题产生的。
如果你修复了上面说的问题，基本上除了你自定义的布局外
bootstrap3.0
的布局问题基本上都能搞定了
bootstrap3.0
的工作原理。它真的很聪明并提供了极好的解决方案。在这么多年使用栅格系统的经验中，
我个人觉得它是实现的最优雅的。虽然看到到这片文章写了这么多会可能觉得
bootstrap3.0
的栅格系统很复杂，
但如果不从整体详细的了解其内部的实现原理的话，在实际使用中，它确实是使用了简单的
，提供了我们一个好用的栅格系统。
========================================================
英文原文：
========================================================
转载处请注明：博客园(王二狗)
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致3.2.3　Bootstrap栅格系统
本文所属图书&>&
本书由国内资深前端工程师撰写，是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法，详细讲解了Bootstrap的组件、插件和扩展技术，而且深度解析了Bootstrap的内核源代码&&
Blueprint（http://www.blueprintcss.org/）是个经典的960栅格系统，提供了完整的CSS框架，栅格系统是它的一部分功能。
Bootstrap默认的栅格系统为12列，宽度为940px，比标准的960栅格系统少20像素，这是因为它少了一个外边距，一个外边距默认为20像素。因此，虽然宽度仅为940像素，但是网页实际宽度与960栅格系统相同。
Bootstrap的栅格系统有两种，一种是固定式的（Fix），一种是流式的（Fluid），也就是可适应宽度的。固定式栅格系统每列的宽度及列与列间的间距都是固定的，列宽为60px，列间距为20px，如图3-11所示。
在Bootstrap中，为栅格系统定义了2类样式。容器为.row，可在容器中加入合适数量的.span*列。在设计页面网格系统时，如果确定宽度为940像素，则应确保各列之和等于12。具体用法如下：
&div class=&row&&
&&&& &div class=&span1&&1&/div&
&&&& &div class=&span1&&1&/div&&
&&&& &div class=&span1&&1&/div&
&&&& &div class=&span1&&1&/div&
&&&& &div class=&span1&&1&/div&
&&&& &div class=&span1&&1&/div&&
&&&& &div class=&span1&&1&/div&
&&&& &div class=&span1&&1&/div&&&&
&&&& &div class=&span1&&1&/div&
&&&& &div class=&span1&&1&/div&&
&&&& &div class=&span1&&1&/div&
&&&& &div class=&span1&&1&/div&&&
&div class=&row&&
&&&& &div class=&span3&&3&/div&
&&&& &div class=&span6&&6&/div&&
&&&& &div class=&span3&&3&/div&
这种用法非常类似于&table&标签。&div class=&row&&相当于&table&，&div class=&span3&&
和&div class=&span6&&分别相当于&&td cols='3'&&、&&td cols='6'&&。注意，由于默认是12列的栅格，所有.span*列所跨越的栅格数之和最多是12，或者等于其父容器的栅格数。
在默认情况下，其中栅格的类样式源代码如下：
[class*=&span&] {
&&&&& float:
&&&&& min-height: 1
&&&&& margin-left: 20
上面是个属性选择器。定义属性名为&class&的值包含子串&span&，也就是span1、span2、span3等。margin-left：20px定义了每列的左边距为20px，也就是图3-11中的间距20px。
栅格系统的容器样式如下：
&&&& margin-left: -20
&&&& *zoom: 1;
.row:before,
.row:after {
&&&& display:
&&&& line-height: 0;
&&&& content: &&;
.row:after {
&&&& clear:
.row用来定义栅格容器，可以看到其中并没有定义宽度（width），所以其宽度就由内部栅格的总列宽决定。margin-left: -20px定义容器的左边距为-20px，作用是抵销第1列前面的20px。然后，通过伪类选择器.row: before和.row: after在容器左右两侧各添加一个空表格，并定义表格内容为空，行高为0，以便兼容IE等非标准在解析栅格系统时出现的异常，同时通过.row：after{clear：both；}样式清除浮动环绕问题。
.span12 { width: 940 }
.span11 { width: 860 }
.span10 { width: 780 }
.span9 { width: 700 }
.span8 { width: 620 }
.span7 { width: 540 }
.span6 { width: 460 }
.span5 { width: 380 }
.span4 { width: 300 }
.span3 { width: 220 }
.span2 { width: 140 }
.span1 { width: 60 }
span1～span12很像表格元素&table&中&td&的cols，即合并多少列。span1就是合并1列，即不合并，span2就是合并2列，span3是合并3列，以此类推。那为什么span4的宽度是300px呢？
先看下span4样式，由于上面的属性选择器已经规定了span1～span12的左边距都是20px，可知span4自身有20px的左边距（margin-left: 20px）。因此对于上面图来说，span4的宽度就等于4个span1宽度减去20像素，于是可以总结出这样的公式：span N的宽度=N&60+（N-1）&20。
把列向右移动可使用.offset*类。每个类都给列的左边距增加了指定单位的列。例如，.offset2将.span3右移了2个列的宽度，如图3-13所示。
.offset*类样式的源代码如下：
.offset12 { margin-left: 980 }
.offset11 { margin-left: 900 }
.offset10 { margin-left: 820 }
.offset9 { margin-left: 740 }
.offset8 { margin-left: 660 }
.offset7 { margin-left: 580 }
.offset6 { margin-left: 500 }
.offset5 { margin-left: 420 }
.offset4 { margin-left: 340 }
.offset3 { margin-left: 260 }
.offset2 { margin-left: 180 }
.offset1 { margin-left: 100 }
.offset1即移动1列，.offset2移动2列。margin-left是如何得出来的呢？以.offset2移动2列为例，图3-13演示了从第2列偏移2列到第4列。未移动前第2列的margin-left为20px，移动后由于占了3个间距和2个列宽，最终的margin-left就是180px。
注意　Bootstrap栅格系统列宽和间距都是可以定制的，在variables.less文件中，可以通过下面几个变量进行定制。
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60
@gridGutterWidth: 20
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth *
(@gridColumns - 1));
例如，在下面的示例中，利用Bootstrap栅格系统设计一个固定宽度的三列版式，代码如下，演示效果如图3-14所示。
&!doctype &
&meta charset=&utf-8&&
&title&&/title&
&link rel=&stylesheet& type=&text/css& href=&bootstrap/css/bootstrap.css&&
&style type=&text/css&&
.row div {
&&&& background-color:
&&&& height:300
&body&&div class=&container&&
&div class=&hero-unit&&&/div&
&div class=&row&&
&&&& &div class=&span2&&&/div&
&&&& &div class=&span7&&&/div&
&&&& &div class=&span3&&&/div&
&footer&&/footer&
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。}