bootstrap中的col-md-4、col-xs-1、col-lg-2中的数字的含义?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (4)
  • 关注 (0)
  • 查看 (192)

我对新版本bootstrap中的网格系统感到困惑,尤其是这些类:

col-lg-*
col-md-*
col-xs-*

(*表示某一数字)

谁能解释一下网格系统和如何使用这些数字,和数字代表的是什么

提问于
用户回答回答于

忽略字母(xs,sm,md,lg)暂时先从数字开始..。

  • 数字(1-12)代表任何div总宽度的一部分。
  • 所有div被划分为12列。
  • 所以,col-*-612列中的6列(宽度的一半),col-*-1212列中的12列中的12列(整个宽度)等

所以,如果你想将列进行平分

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

如果你想三分列,你可以编写:

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

你会注意到列的#加起来总是12。它可能小于12,但如果超过12,请注意,因为你的超过范围的div会跳到下一行。

你也可以列内嵌套列,(最好用一个.row(它们的包装器),例如:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

每一组嵌套div也跨越其父div的12列。注:因为每个.col类的任何一侧都有15 px填充,通常应该将嵌套的列包装在.row,利润率为-15%。这样可以避免重复填充,并使内容在嵌套类和非嵌套类之间排列。

--你没有特别问xs, sm, md, lg用法,但它们是手牵手的,所以我忍不住要碰一下它...

简而言之,它们用于定义该类应应用于哪个屏幕大小:

  • xs=额外的小屏幕(移动电话)
  • SM=小屏幕(平板)
  • Md=中等屏幕(一些桌面)
  • LG=大屏幕(其余桌面)

你应该通常使用多列类对div进行分类,这样它的行为就会因屏幕大小而不同(这是引导响应的核心)。有课的教区col-xs-6col-sm-4将跨越一半的屏幕在手机(Xs)和1/3的屏幕在平板电脑(Sm)。

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

注:如下所示,给定屏幕大小的网格类适用于该屏幕大小。更大除非另一个声明覆盖它(即col-xs-6 col-md-4跨6列xssm,以及4列mdlg尽管smlg没有明确指出)

注:如果你不定义xs,它将默认为col-xs-12(即:col-sm-6一半宽smmdlg屏幕,但全宽度xs(屏幕)。

注:如果你.row超过了12,你只要知道之后的结果即可。

用户回答回答于

要点是:

col-lg-*col-md-*col-xs-*col-sm定义在这些不同屏幕大小中将有多少列。

例:如果你想在桌面屏幕和电话屏幕上有两列,你可以放两列。col-md-6和两个col-xs-6列中的类。

如果你想在桌面屏幕上有两列,在电话屏幕上只有一列(即两行叠在一起)two col-md-6和两个col-xs-12在你的列中,因为和将为24,它们将自动堆叠在一起。

用户回答回答于

从 Twitter Bootstrap 文档可知:

  • 小网格(≥768 px)=.col-sm-*
  • 中等网格(≥992 px)=.col-md-*
  • 大型网格(≥1200 px)=.col-lg-*
用户回答回答于

Bootstrap网格系统有四类:X(用于电话)SM(小型机器)MD(台式机)LG(用于大型台式计算机)上面的类可以组合在一起,以创建更动态和更灵活的布局。提示:每个类都在扩展,因此如果希望为xs和sm设置相同的宽度,只需指定xs。

col-lg- 代表≥ 1200px

col-md-代表≥ 992px

col-xs- 表示列更小≥ 768px

像素数是断点,例如col-xs窗口小于768px(可能是移动设备)..。

我还创建了下面的图像,以展示网格系统是如何工作的,在这个示例中,我将它们与3一起使用,如下所示col-lg-6要向你展示网格系统如何在页面中工作,请查看lgmdxs响应窗口大小:

扫码关注云+社区