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

Question

我买了一个响应式html5布局，我将它安装在www.cdauae.com/new

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

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

这里连续有16列，我将行分成2部分，每部分是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>

我不明白。为什么他们将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>

那让我很困惑。我何时结合？我什么时候自己使用col-md？我什么时候自己使用col-lg？我什么时候自己使用col-sm？

Answer 1

在同一行上添加col-lg-* , col-md-*, col-sm-*类定义说明将根据屏幕分辨率应用哪个类。

col-lg-*类在该框架的最小宽度：992px之后应用。

col-md-*类在该框架的最小宽度：768px之后应用。

检查以下图片，例如：

观看此视频以获取解释：https://www.youtube.com/watch?v=xinn-BtAGpk

Answer 2

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

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

https://getbootstrap.com/docs/4.0/examples/grid/