Question

我在<div class="col-lg-8 col-xs-12 col-md-6>这样的项目上看到了div，我想知道为什么有3个网格类而不是1.它是否适用于移动设备？但是浏览器如何解码哪一个用于移动？是否有特定的类序列<div class="(PC) col-lg-8 (LAPTOPS) col-xs-12 (MOBILE)col-md-6>？

如果我使用col-offset选项，它将偏移所有类或只是前面的课程？

提前致谢！

Answer 1

请点击此处获取更多信息

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

网格类Bootstrap网格系统有四个类：

xs（适用于手机）

sm（适用于平板电脑）

md（适用于桌面版）

lg（更大   桌面）

上面的类可以结合起来创造更多的动态和   灵活的布局。

提示：每个类都会向上扩展，因此如果您希望为其设置相同的宽度   xs和sm，你只需要指定xs。

Answer 2

浏览器不会对这些内容进行解码，这是浏览器中Js的Bootstrap文件。

if (dr[3].ToString() == "United States") {
 dr[3].ToString().Replace("USA", "United States");
 cmp.name = dr[3].ToString();
} else {
 cmp.name = dr[3].ToString();
}

如果您使用检查员这个班级进行检查，您会看到例如col-8对应于：

// LG - larger computer
// MD - computer
// SM - tablet
// XS - smartphone

所以它需要50％的父母宽度。如果你在col-4设置一个类，它的宽度将比col-8少50％，所以：

.col-8 {
    width: 50%;
    max-width: 50%;
}

当你添加“sm”时，它意味着它只会针对平板电脑触发“md”。

Answer 3

根据你的问题，你看到使用了3个班级，有 4个基础班 -

col-lg-x，2。col-md-x，3。col-sm-x，4。col-xs-x。

-lg - ＆gt;大型桌面。
-md - ＆gt;笔记本/台式机。
-sm - ＆gt;片剂。
-xs - ＆gt;移动屏幕。

和＆＃34; -x＆＃34;代表块的宽度数值，范围在1到12之间。

我们的屏幕基本上由引导程序分为12个部分（在每个屏幕尺寸--lg，md，sm，xs）在所有情况下，12都是整个屏幕。

因此，您可以根据屏幕大小选择要分配给某个块的块空间宽度。

所以，如果你选择 -

<div> class="col-lg-8 col-xs-12 col-md-6">

您告诉浏览器允许<div>拥有

// col-lg-8 -- 8 blocks of space on large screens
// col-xs-12 -- 12 (whole screen) of space on small(mobile) screens
// col-md-6 6 blocks (half the screen) in medium sized screens (laptops/desktops)

同时它们是类，没有序列问题。

有人可以解释我Bootstrap的<div>网格＆＃34;序列＆＃34;？

3 个答案: