Html 我不确定网格系统在我买的布局中是如何工作的

我买了一个反应灵敏的html5布局，并将其安装在www.cdauae.com/new上

我熟悉网格系统的工作原理。例如，在我的另一个使用不同布局的网站上，我说了这样的话：-

<div class="row">
   <div class="eight columns">xyz</div>
   <div class="eight columns">xyz</div>
</div>

xyz
xyz

这里一行有16列，我把行分成两部分，每部分有8列

然而，在新的布局中，它会显示col md、col lg和col sm等内容。我不知道如何使用它们。我知道新的布局一行有12列

例如，在主页上，他们想将行分为3部分，每个部分有4列。他们写道：-

<div class="row">
   <div class="col-md-10 col-lg-4">xyz</div>
   <div class="col-md-10 col-lg-4">xyz</div>
   <div class="col-md-10 col-lg-4">xyz</div>
</div>

xyz
xyz
xyz

我不明白。为什么他们将col md和col lg组合在同一行代码中？还有一些部分，它们将col md、col lg和col sm组合在同一行代码中

如果我说，我会得到同样的结果：-

<div class="row">
   <div class="col-lg-4">xyz</div>
   <div class="col-lg-4">xyz</div>
   <div class="col-lg-4">xyz</div>
</div>

<div class="row">
   <div class="col-md-4">xyz</div>
   <div class="col-md-4">xyz</div>
   <div class="col-md-4">xyz</div>
</div>

xyz
xyz
xyz

如果我说：-

<div class="row">
   <div class="col-lg-4">xyz</div>
   <div class="col-lg-4">xyz</div>
   <div class="col-lg-4">xyz</div>
</div>

<div class="row">
   <div class="col-md-4">xyz</div>
   <div class="col-md-4">xyz</div>
   <div class="col-md-4">xyz</div>
</div>

xyz
xyz
xyz

---

这让我很困惑。我什么时候合并？我何时单独使用col md？我何时单独使用col lg？什么时候可以单独使用col sm？

添加

col lg-*、col md-*、col sm-*

类定义在同一行上，表示将根据屏幕分辨率应用哪个类

collg-*

类在该框架的最小宽度为992px后应用

colmd-*

在该框架的最小宽度为768px后应用类

例如，请查看下图：

---

观看此视频以获取解释：

我知道上面已经回答了这个问题，所以我只是添加了这个以供参考：

这是标准的引导式响应设计系统：

---

祝贺你，你刚刚带来了免费的引导模板。转到bootstrap网页，看看它是如何工作的

-xs-

，

-sm-

，

-md-

和

-lg-

表示浏览器宽度，number表示列数。检查。正确地说，您的列md-*col lg-*将根据答案中提到的宽度应用，因此它们必须位于同一行，以定义不同屏幕大小的不同行为。@PM。是的，保持类在同一行将根据屏幕大小应用。那么如何使用它呢？如果我只说col lg，然后在中等设备上打开它，会发生什么？它会变质吗？或者它会根据默认行为自行修复，如果我想覆盖默认行为，我会说col lg和col md在一起？@shiddo，如果您在较小的设备上使用

col-lg-12

，这不会破坏您的布局。例如，检查您的“我们是谁”部分是否在大屏幕上使用全屏，这也将在手机上使用全屏。好。我希望我的网站在所有屏幕尺寸上都能很好地工作，但如果必须将所有的col lg、col md、col sm组合在一起，我会给每个设备提供不同数量的列，这将是相当混乱的。如果我说col-lg-6 col-md-6和col-lg-6 col-md-6这样我就可以把行分成两部分，每个部分有6列，这样可以吗？在较小的屏幕上，一行中的两个部分不合适，因此应自动转换为两行