html - 了解Bootstrap 3中的网格类(col-sm-#和col-lg-#)

我开始使用Bootstrap 3,我在理解如何使用网格类时遇到了一些麻烦。

这是我到目前为止所发现的:

看起来类col-sm-6col-lg-#与普通旧col-#的不同之处在于它们仅在屏幕高于特定尺寸(分别为768px和992px)时应用。 如果省略-sm-或-lg-,div将永远不会折叠成一列。

但是,当我在一行中创建两个div,它们都是col-sm-6时,当窗口在768px和992px之间时,它们似乎只是并排。 换句话说,如果我将窗口一直缩小然后慢慢加宽,则布局为单列,然后是两列,然后再次返回单列。

  1. 这是预期的行为吗?
  2. 如果我想要超过768px的两列,我应该同时应用这两个类吗?(col-6
  3. 还应包括col-6吗?<div class="col-6 col-sm-6 col-lg-6">
5个解决方案
60 votes

[更新下面]

我又看了一下文档,看来我忽略了一个专门讨论这个问题的部分。

我的问题的答案:

  1. 是的,它们仅适用于特定范围,而不是高于特定宽度的所有范围。

  2. 是的,这些课程要结合起来。

  3. 看起来这在某些情况下是合适的而不是其他情况,因为col-#类基本上等于col-xsm-#或宽度大于0px(所有宽度)。

除了快速阅读文档之外,我认为我很困惑,因为我使用“Bootstrap 2心态”进入Bootstrap 3。 具体来说,我在v2中使用(可选)响应式样式(bootstrap-responsive.css),而v3则完全不同(为了更好的IMO)。

更新稳定版:

这个问题最初是在RC1出局时写的。 他们对RC2做了一些重大改动,所以对于现在读这篇文章的人来说,并不是上面提到的所有内容都适

当我正在写这篇文章的时候,col-*-#课程似乎适用于向上。 因此,例如,如果您想要一个元素为12列(全宽)用于手机,但是两个6列(半页)用于平板电脑及以上,您可以执行以下操作:

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

(在写完这个问题后,他们还增加了一个xs断点。)

emersonthis answered 2019-09-10T23:19:58Z
39 votes

这里有一个非常好的教程,解释了如何在Bootstrap 3中使用新的网格类。

它还包括mixins等。

Srikanth answered 2019-09-10T23:20:29Z
5 votes

要修改上面的SDP答案,你不需要在<div class="col-xs-12 col-sm-6">中声明col-xs-12.Bootstrap 3是移动优先的,因此默认情况下每个div列都假定为100%宽度div - 这意味着在“xs”大小它是100% 宽度,无论您在sm, md, lg设置什么,它都将始终默认为该行为。如果您希望xs列不是100%,那么您通常会执行col-xs-(1-11)

helloerik answered 2019-09-10T23:20:55Z
4 votes

“如果我想要超过768px的两列,我应该同时应用这两个类吗?”

这应该很简单:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

无需添加col-lg-6

演示:[http://www.bootply.com/73119]

Zim answered 2019-09-10T23:21:40Z
4 votes

理解的最佳方式是简单地从上到下思考(大型台式机到手机)

首先,因为B3首先是移动的所以如果你使用xs那么从大型桌面到xs的列将是相同的(我推荐使用xs或sm,因为这样可以按照你想要的方式保持每个屏幕尺寸)

其次,如果你想为不同设备或分辨率的列赋予不同的宽度,那么你可以添加多个类,例如

以上将根据屏幕分辨率更改宽度,请记住我保持每个类中的总列数= 12

我希望我的回答会有所帮助!

Aslam answered 2019-09-10T23:22:33Z
translate from https://stackoverflow.com:/questions/18146775/understanding-the-grid-classes-col-sm-and-col-lg-in-bootstrap-3