了解Bootstrap 3中的网格类（col-sm-＃和col-lg-＃） [英] Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3

问题描述

我开始使用Bootstrap 3，我在理解网格类是如何使用的。

这是我想象的到目前为止：

看来，类 col-sm - ＃和 col -lg ​​ - ＃与普通旧 col - ＃有所不同，因为它们只适用于屏幕高于一定大小（分别为768像素和992像素） 。如果省略-sm-或-lg，div将不会折叠到一个列中。

但是，当我在一行中创建两个div < c $ c> col-sm-6 当窗口在768像素和992像素宽之间时，它们似乎只是 。换句话说，如果我将窗口一直缩小，然后慢慢地扩大它，则布局是单列，然后是两列，然后再回到单列。

1. 这是预期的行为吗？


2. 如果我需要两列超过768像素， / em>类？ （< div class =col-sm-6 col-lg-6> ）


3. c> col-6 < div class =col-6 col-sm-6 col-lg-6>

解决方案

[UPDATE BELOW]

我对我的问题的答案：

1. 是的，它们仅适用于特定范围，而不是一定宽度以上的所有范围。





3. 这似乎在某些情况下是适当的，但不是其他人，因为col-＃类基本上等同于col- xsm-＃或，宽度大于0px（所有宽度）。

除了阅读文档太快之外，我想我很困惑，因为我进入Bootstrap 3， 2心态。具体来说，我在v2和v3中使用（可选）响应样式（bootstrap-responsive.css）是完全不同的（为更好的IMO）。

UPDATE for stable release：

此问题最初是在RC1停止时写入的。他们在RC2中做了一些重大的改变，所以现在任何人都可以阅读，不是上面提到的一切仍然适用。

由于当前我正在写这个， $ c> col - * - ＃类DO似乎向上应用。例如，如果您想要一个元素为手机的12列（全宽），但平板电脑和其他两个6列（半页），您可以这样做：

 < div class =col-xs-12 col-sm-6> ... //不需要col-md-6或col-lg-6 
  

在写这个问题后还添加了一个额外的xs断点。）

I'm getting started on Bootstrap 3 and I'm having some trouble understanding how the grid classes are meant to be used.

Here's what I've figured out so far:

It appears that the classes col-sm-# and col-lg-# differ from plain old col-# in that they will only apply when screens are above a certain size (768px and 992px respectively). If you omit the -sm- or -lg- the divs will never collapse into one column.

However, when I create two divs inside a row that are both col-sm-6 it seems they are only side by side when the window is between 768px and 992px wide. In other words, if I shrink the window all the way down and then slowly widen it, the layout is single column, then two columns, then back to single column again.

1. Is this the intended behavior?
2. If I want two columns for anything over 768px, should I apply both classes? (<div class="col-sm-6 col-lg-6">)
3. Should col-6 also be included? <div class="col-6 col-sm-6 col-lg-6">

解决方案

[UPDATE BELOW]

I took another look at the docs and it appears I overlooked a section which talks specifically about this.

The answers to my questions:

1. Yes, they are meant to apply only to specific ranges, rather than everything above a certain width.

2. Yes, the classes are meant to be combined.

3. It appears that this is appropriate in certain cases but not others because the col-# classes are basically equivalent to col-xsm-# or, widths above 0px (all widths).

Other than reading the docs too quickly, I think I was confused because I came into Bootstrap 3 with a "Bootstrap 2 mentality". Specifically, I was using the (optional) responsive styles (bootstrap-responsive.css) in v2 and v3 is quite different (for the better IMO).

UPDATE for stable release:

This question was originally written when RC1 was out. They made some major changes in RC2 so for anyone reading this now, not everything mentioned above still applies.

As of when I'm currently writing this, the col-*-# classes DO seem to apply upwards. So for example, if you want an element to be 12 columns (full width) for phones, but two 6 columns (half page) for tablets and up, you would do something like this:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(They also added an additional xs break point after this question was written.)

这篇关于了解Bootstrap 3中的网格类（col-sm-＃和col-lg-＃）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！