了解 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 将永远不会折叠为一列.

但是，当我在一行中创建两个都是 col-sm-6 的 div 时，当窗口介于 768px 和992 像素宽.换句话说，如果我一直向下缩小窗口然后慢慢扩大它，布局是单列，然后是两列，然后又回到单列再次.

1. 这是预期的行为吗?
2. 如果我想要超过 768 像素的任何内容的两列，我是否应该应用两个类?(
   )
3. 是否应该包括 col-6 也?

解决方案

[UPDATE BELOW]

我又看了一遍文档，似乎我忽略了专门讨论这个的部分.

我的问题的答案:

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

2. 是的，这些课程是要组合在一起的.

3. 这似乎在某些情况下是合适的，但在其他情况下不合适，因为 col-# 类基本上等同于 col-xsm-# 或 0px 以上的宽度(所有宽度).

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

更新稳定版本:

这个问题最初是在RC1出来的时候写的.他们对 RC2 进行了一些重大更改，因此对于现在阅读本文的任何人来说，并非上述所有内容仍然适用.

截至我目前撰写本文时，col-*-# 类似乎确实向上应用.因此，例如，如果您希望手机的元素为 12 列(全宽)，而平板电脑及以上的元素为两个 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屋！