Html Bootstrap 跨度和列之间有什么区别
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21630884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between Bootstrap Spans & Columns
提问by user2965875
I working with bootstrap but trying to understand the difference between Spans and columns,
我使用引导程序但试图了解跨度和列之间的区别,
example
例子
<div class="span4">...</div>
or
<div class="col-md-4"></div>
What's the difference between them or do they do same thing?
他们之间有什么区别,或者他们做同样的事情?
回答by easwee
<div class="span4">...</div>
is old Bootstrap syntax up until version 2.3.2,
是旧的 Bootstrap 语法,直到版本 2.3.2,
<div class="col-md-4"></div>
is Bootstrap version 3syntax.
是 Bootstrap版本 3语法。
The main difference is that the new bootstrap is build on "mobile first" approach, while the old one used the typical 960gs approach to construct the grid and than had the responsivness handled separately.
主要区别在于新的引导程序建立在“移动优先”的方法之上,而旧的引导程序使用典型的 960gs 方法来构建网格,而不是单独处理响应性。
You now have 4 different values that will scale the element differently based on screen size and wanted behaviour:
您现在有 4 个不同的值,它们将根据屏幕大小和想要的行为对元素进行不同的缩放:
.col-md-*
is the equivalent of span*
, while:
相当于span*
,而:
.col-xs-*
.col-sm-*
.col-lg-*
are used to solve the vertical stacking of elements on smaller devices (enabling you to achieve three column layouts on small screen devices by default, without having to overwrite bootstrap default classes with your own).
用于解决较小设备上元素的垂直堆叠(使您能够在小屏幕设备上默认实现三列布局,而不必用您自己的覆盖引导程序默认类)。
回答by Robert
Spans were used in BS 2 - Scaffolding
BS 2 -脚手架中使用了跨度
Cols are used in BS 3 - CSS
Cols 用于 BS 3 - CSS
They are, for all intents and purposes, the same thing.
就所有意图和目的而言,它们是同一件事。