Bootstrap Spans和放大器之间有什么区别？列 [英] What's the difference between Bootstrap Spans & Columns

问题描述

我使用引导程序，但试图了解Spans和列之间的区别，例如

 < div class =span4> ...< / div> 
或
< div class =col-md-4>< / div> 
  

它们之间有什么区别，或者它们做同样的事情？

解决方案

< div class =span4> ...< / div>


是旧的Bootstrap语法，直到 version 2.3.2 ，

 < div class =col- MD-4\" >< / DIV> 
  

是Bootstrap 版本3 的语法。

主要区别在于新引导程序基于移动优先方式构建，而旧引导程序使用典型的960gs方法构建网格，并且具有单独处理的响应性。

您现在有4个不同的值，可根据屏幕大小和想要的行为对元素进行不同的缩放：

  .col-md- * 
  

相当于 span * ，而：

  .col-xs- * 
 .col-sm- * 
 .col-lg- * 
  

用于解决较小设备上元素的垂直堆叠问题（默认情况下，您可以在小屏幕设备上实现三列布局，而无需用自己的方法覆盖引导程序默认类）。

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?

解决方案

<div class="span4">...</div>

is old Bootstrap syntax up until version 2.3.2 ,

<div class="col-md-4"></div>

is Bootstrap version 3 syntax.

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.

You now have 4 different values that will scale the element differently based on screen size and wanted behaviour:

.col-md-* 

is the equivalent of span*, while:

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

这篇关于Bootstrap Spans和放大器之间有什么区别？列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！