Css 通过示例引导列类_Css_Twitter Bootstrap

Css 通过示例引导列类

css twitter-bootstrap

Css 通过示例引导列类,css,twitter-bootstrap,Css,Twitter Bootstrap,在解释何时使用各种列类方面，这些类（在其他方面都是完美和令人惊奇的！）做得不好。他们只是用以下方式描述这些类： xs（适用于屏幕宽度小于768px的手机） sm（适用于平板电脑-屏幕宽度等于或大于768px） md（适用于小型笔记本电脑-屏幕宽度等于或大于992px） lg（适用于笔记本电脑和台式机-屏幕宽度等于或大于1200px）但是他们从来没有明确（至少对我来说）我应该在什么时候使用smvsxs，等等。对我来说，Bootstrap甚至提供这些类是很奇怪的，因为我认为Bootstrap的

在解释何时使用各种列类方面，这些类（在其他方面都是完美和令人惊奇的！）做得不好。他们只是用以下方式描述这些类：

```
xs
```
（适用于屏幕宽度小于768px的手机）
```
sm
```
（适用于平板电脑-屏幕宽度等于或大于768px）
```
md
```
（适用于小型笔记本电脑-屏幕宽度等于或大于992px）
```
lg
```
（适用于笔记本电脑和台式机-屏幕宽度等于或大于1200px）

但是他们从来没有明确（至少对我来说）我应该在什么时候使用

sm

xs

，等等。对我来说，Bootstrap甚至提供这些类是很奇怪的，因为我认为Bootstrap的全部目的是让它看起来统一一致，然后在屏幕大小改变时自动响应……因此，根据用户的设备使行为灵活并不是我认为CSS框架会向API公开的事情开发人员

不管怎样，这两者之间有什么区别：

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>


.col-sm-4
.col-sm-4
.col-sm-4

这是：

<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-lg-4">.col-lg-4</div>
</div>

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-lg-8">.col-lg-8</div>
</div>


.col-xs-4
.col-md-4
.col-lg-4

这是：

<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-lg-4">.col-lg-4</div>
</div>

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-lg-8">.col-lg-8</div>
</div>


.col-sm-4
.col-lg-8

?？换句话说，如果所有列的宽度加起来必须达到12，那么将它们声明为

xs

sm

md

lg

？！？！提前谢谢

目的是允许在不同的设备上进行不同的布局。例如，如果您希望移动设备上的列为全宽（12），但桌面设备上的列仅占屏幕的三分之一（4）

据我所知，它们不需要加起来是12，12就是一行

请参见

目的是允许在不同的设备上使用不同的布局。例如，如果您希望移动设备上的列为全宽（12），但桌面设备上的列仅占屏幕的三分之一（4）

据我所知，它们不需要加起来是12，12就是一行

请参见

让我们先从xs、md、lg后面的数字开始

在引导中，这些数字表示列。所有div被分成12列

col-md-6

跨越12列中的6列（屏幕宽度的一半），当

为col-md-12

时，它占据中等大小屏幕的整个屏幕宽度（md）<代码>(≥ 992px）

因此，如果您想让三个相等的列跨越一个div，那么写（对于小屏幕）


.col-sm-4
.col-sm-4
.col-sm-4

如果希望三个不同的列跨相同的宽度，可以编写：

<div class="col-sm-2">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-6">Column 3</div>

第1列
第2栏
第3栏

在这些示例中，列的数量总和始终为12。在上述示例中，2+4+6=12

当涉及到xs、sm、md、lg时，它们被用来定义该类应用的屏幕大小：

xs=超大屏幕（移动电话）

sm=小屏幕（平板电脑）

md=中等屏幕（某些台式机）

lg=大屏幕（剩余桌面）

通常，我们为单个div分配多个类，因此它的行为取决于用户的设备屏幕大小。比如说

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-4</div>
  <div class="col-xs-6 col-sm-8">.col-md-4</div>
</div>


.col-xs-4
.col-md-4

上面的col-xs-6和col-sm-4类行将覆盖移动屏幕的一半和平板电脑屏幕大小的1/3（sm）

=576px

让我们先从xs、md、lg之后的数字开始