栅格布局
<h3>栅格布局</h3>
<p>方法1：在外层用row，内层用col-sm-6这种形式，col里面的数字表示占12列中的几列
方法2：在外层的row中使用row row-cols-1 row-cols-sm-2， 此数字表示在各种设备上显示几列，而不是占12份中的几份；row-cols-sm-2表示在768以上的设备上显示为2列； 内层div只需要一个col就可以了，不需要每个都定义数字，这样更简洁</p>
<pre><code>&lt;div class=&quot;container px-4 py-5&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;a&lt;/div&gt;
&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;b&lt;/div&gt;
&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;c&lt;/div&gt;
&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;d&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;container px-4 py-5&quot;&gt;
&lt;div class=&quot;row row-cols-1 row-cols-sm-2 row-cols-md-3&quot;&gt;
&lt;div class=&quot;col&quot;&gt;a&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;b&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;c&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;d&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e9e630358e4171590fca53caee46c538&amp;file=file.png" alt="" /></p>