Bootstrap中“col-md-4”、“col-xs-1”、“col-lg-2”中的数字含义

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

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

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

有人能解释一下吗?

这个数字是如何对齐网格的? 如何使用这些数字? 它们到底代表什么?

当前回答

Bootstrap网格系统有四个类: Xs(手机) Sm(药片) Md(用于台式机) Lg(适用于较大的台式机) 上面的类可以组合起来创建更动态和灵活的布局。提示:每个类都会缩放，因此如果您希望为 x和sm，你只需要指定Xs。

好吧，答案很简单，但请继续阅读:

Col-lg -表示列大≥1200px Col-md -列介质≥992px coll -xs-表示列特小≥768px

像素数字是断点，例如，当窗口小于768px(可能是移动设备)时，colx -xs将目标元素…

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

其他回答

来自Twitter Bootstrap文档:

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

主要观点是:

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

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

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

给你

Col-lg-2:如果屏幕很大(lg)，那么这个组件将占用2个元素的空间，考虑到整行可以容纳12个元素(所以你会看到在大屏幕上这个组件占用一行16%的空间)

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

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

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

好吧，答案很简单，但请继续阅读:

Col-lg -表示列大≥1200px Col-md -列介质≥992px coll -xs-表示列特小≥768px

像素数字是断点，例如，当窗口小于768px(可能是移动设备)时，colx -xs将目标元素…

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

Col-md-6表示:

放置这个类的子元素，将在它的父元素中占据12列中的6列，当屏幕大小等于或大于≥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将使子元素占据父元素的所有可用列

链接:

网格系统断点

推荐文章