bootstrap栅栏系统解决当弹窗口变小的时候变成1列问题

女爷i 2022-05-16 03:45 61阅读 0赞

##  ##

解决当弹窗口变小的时候变成1列问题

注意弹窗框的宽度    750px  应该用sm

##  ##

![70][]

![70 1][]

## 网格选项 ##

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

<table> 
 <tbody> 
  <tr> 
   <th>&nbsp;</th> 
   <th>超小设备手机（&lt;768px）</th> 
   <th>小型设备平板电脑（≥768px）</th> 
   <th>中型设备台式电脑（≥992px）</th> 
   <th>大型设备台式电脑（≥1200px）</th> 
  </tr> 
  <tr> 
   <td>网格行为</td> 
   <td>一直是水平的</td> 
   <td>以折叠开始，断点以上是水平的</td> 
   <td>以折叠开始，断点以上是水平的</td> 
   <td>以折叠开始，断点以上是水平的</td> 
  </tr> 
  <tr> 
   <td>最大容器宽度</td> 
   <td>None (auto)</td> 
   <td>750px</td> 
   <td>970px</td> 
   <td>1170px</td> 
  </tr> 
  <tr> 
   <td>Class 前缀</td> 
   <td><strong>.col-xs-</strong></td> 
   <td><strong>.col-sm-</strong></td> 
   <td><strong>.col-md-</strong></td> 
   <td><strong>.col-lg-</strong></td> 
  </tr> 
  <tr> 
   <td>列数量和</td> 
   <td>12</td> 
   <td>12</td> 
   <td>12</td> 
   <td>12</td> 
  </tr> 
  <tr> 
   <td>最大列宽</td> 
   <td>Auto</td> 
   <td>60px</td> 
   <td>78px</td> 
   <td>95px</td> 
  </tr> 
  <tr> 
   <td>间隙宽度</td> 
   <td>30px<br> （一个列的每边分别 15px）</td> 
   <td>30px<br> （一个列的每边分别 15px）</td> 
   <td>30px<br> （一个列的每边分别 15px）</td> 
   <td>30px<br> （一个列的每边分别 15px）</td> 
  </tr> 
  <tr> 
   <td>可嵌套</td> 
   <td>Yes</td> 
   <td>Yes</td> 
   <td>Yes</td> 
   <td>Yes</td> 
  </tr> 
  <tr> 
   <td>偏移量</td> 
   <td>Yes</td> 
   <td>Yes</td> 
   <td>Yes</td> 
   <td>Yes</td> 
  </tr> 
  <tr> 
   <td>列排序</td> 
   <td>Yes</td> 
   <td>Yes</td> 
   <td>Yes</td> 
   <td>Yes</td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220516/3f84e35b57a742d894cd3b97aebf3f59.png
[70 1]: /images/20220516/8090fd86b145432cb52a48b25b6fdb08.png