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

我购买了自适应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？

最佳答案

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

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

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

检查下面的图像例如：



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