“;col-md-4"，"”中的数字含义col-xs-1",“col-lg-2"在引导

我对新的Bootstrap中的网格系统感到困惑，特别是这些类:

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

(其中*表示某个数字)。

有人能解释一下吗?

  1. < em >如何这个数字是对齐网格?< / em >
  2. < em >如何使用这些数字?< / em >
  3. < em >什么他们实际上代表?< / em >
631997 次浏览
小开
最佳答案

只适用于引导3。

忽略字母(x年代， sm， 医学博士， lg) < em >，我只从数字开始…

  • 数字(1-12)表示任何div的总宽度的一部分
  • 所有的div被分为12个列
  • 因此，col-*-6跨越12列中的6列(宽度的一半)，col-*-12跨越12列中的12列(整个宽度)，等等

所以，如果你想要两列相等张成一个div，写

<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，这完全是另一个故事)。

你也可以使用列中嵌套列(最好使用.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>

由于每个.col类的两边都有15px的padding，所以你通常应该将嵌套列包装在.row中，它的边距为-15px。这避免了重复填充，并保持嵌套和非嵌套col类之间的内容对齐。

——你没有特别问xs, sm, md, lg的用法，但它们是相关联的，所以我忍不住要提到它……

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

  • xs = 超大屏幕(手机)
  • sm = 小屏幕(片剂)
  • 医学博士 = 中等屏幕(部分桌面)
  • lg = 大屏幕(剩余的桌面)

读取"Grid 选项”< /强> < / >

你应该通常使用多个列类对div进行分类，以便它根据屏幕大小表现不同(这是使bootstrap响应的核心)。一个具有col-xs-6和col-sm-4类的div将横跨手机(xs)的一半屏幕和平板电脑(sm)的1/3屏幕。

<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在xs 和sm上横跨6列，在md xs0上横跨4列，即使sm和lg从未显式声明)

注意:如果你没有定义xs，它将默认为col-xs-12(即col-sm-6在sm， md和lg屏幕上是一半宽度，但在xs屏幕上是全宽度)。

注意:如果你的.row包含超过12个cols，这实际上是完全没问题的，只要你知道它们将如何反应。这是一个有争议的问题，并不是每个人都同意。

小开

主要观点是:

col-lg-* col-md-* col-xs-* col-sm定义在这些不同的屏幕尺寸中有多少列。

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

如果你想在桌面屏幕上有两列，而在电话屏幕上只有一列(即两行堆叠在一起)，你可以在你的列中放入two col-md-6和两个col-xs-12，因为sum将是24，它们将自动堆叠在彼此的顶部，或者只保留xs样式。

小开

从Twitter引导文档:

  • 小网格(≥768px) = .col-sm-*，
  • medium grid(≥992px) = .col-md-*，
  • 大网格(≥1200px) = .col-lg-*。

to Read More

小开

Bootstrap网格系统有四个类:
xs(手机)
Sm(片剂)
Md(对于台式机)
Lg(大台式机)

上面的类可以组合起来创建更动态和灵活的布局。

每个类都按比例放大，所以如果你想为 x和sm，你只需要指定Xs。

好吧,答案很简单，但是继续读下去:

col-lg -表示大列≥ 1200px
col-md -表示列介质≥ 992px
colo -xs-表示列额外小≥ 768px

像素号是断点，例如，当窗口小于768 px(可能是移动设备)时，col-xs是针对元素的…

我还创建了下面的图像来展示网格系统是如何工作的，在这个例子中，我使用了3，比如col-lg-6来展示网格系统在页面中的工作方式，看看lg， md和xs是如何响应窗口大小的:

Bootstrap grid system, col-*-6

小开

给你

col-lg-2:如果屏幕很大(lg)，则该组件将占用2元素的空间，考虑到整行可以容纳12个元素(因此在大屏幕上，该组件占用一行16%的空间)

col-lg-6:如果屏幕很大(lg)，那么该组件将占用6元素的空间，考虑到整行可以容纳12个元素——当应用时，你会看到该组件已经占用了行中一半的可用空间。

上述规则仅适用于屏幕较大的情况。当屏幕很小时，该规则将被丢弃，每行只显示一个组件。

下图显示了不同尺寸的屏幕宽度:

屏幕大小定义

小开

我能给出的最简单的解释。

col-md-6表示:

  • 放置这个类的子元素，
  • 将在它的父元素6列中占据12个可用元素，
  • 当屏幕大小等于或大于≥768px时(媒介大小的屏幕)。

记住在Bootstrap(5.1)中:

  • 在他们的网格系统中，每个元素都有12列。
  • 这12列是在父元素中找到的(正如预期的那样)，子元素占用的列数与您告诉它占用的列数相同(在本例中为6)。

在你的代码中，你可以看到这样的东西:

<div class="row" id="parent">
<div class="col-12 col-md-6" id="child">
Content.
</div>
</div>

当视口大小低于给定的中等屏幕大小768px时，col-12将使子对象占用父对象的所有可用列

链接:


提交答案