技术笔记

编程 营销 外贸


栅格布局

<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>&amp;lt;div class=&amp;quot;container px-4 py-5&amp;quot;&amp;gt;         &amp;lt;div class=&amp;quot;row&amp;quot;&amp;gt;             &amp;lt;div class=&amp;quot;col-sm-6 col-md-4&amp;quot;&amp;gt;a&amp;lt;/div&amp;gt;             &amp;lt;div class=&amp;quot;col-sm-6 col-md-4&amp;quot;&amp;gt;b&amp;lt;/div&amp;gt;             &amp;lt;div class=&amp;quot;col-sm-6 col-md-4&amp;quot;&amp;gt;c&amp;lt;/div&amp;gt;             &amp;lt;div class=&amp;quot;col-sm-6 col-md-4&amp;quot;&amp;gt;d&amp;lt;/div&amp;gt;         &amp;lt;/div&amp;gt;       &amp;lt;/div&amp;gt;       &amp;lt;div class=&amp;quot;container px-4 py-5&amp;quot;&amp;gt;         &amp;lt;div class=&amp;quot;row row-cols-1 row-cols-sm-2 row-cols-md-3&amp;quot;&amp;gt;             &amp;lt;div class=&amp;quot;col&amp;quot;&amp;gt;a&amp;lt;/div&amp;gt;             &amp;lt;div class=&amp;quot;col&amp;quot;&amp;gt;b&amp;lt;/div&amp;gt;             &amp;lt;div class=&amp;quot;col&amp;quot;&amp;gt;c&amp;lt;/div&amp;gt;             &amp;lt;div class=&amp;quot;col&amp;quot;&amp;gt;d&amp;lt;/div&amp;gt;         &amp;lt;/div&amp;gt;   &amp;lt;/div&amp;gt;</code></pre> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e9e630358e4171590fca53caee46c538&amp;amp;file=file.png" alt="" /></p>

页面列表

ITEM_HTML