bootstrap 栅格系统自动隐藏

我不是女神ヾ 2022-05-12 12:58 300阅读 0赞

# [bootstrap 栅格系统 自动隐藏][bootstrap _] #

1 [Container][]

顾名思义[Container][]是栅格系统最外层的class，直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值，这样container与浏览器窗口之间就存在一定距离。

2 row

要注意的是：row会清除内边距的效果，但不会清除内边距，col要放在row里，row要放在container里

row指container的一行，每行理想状态包含12个col，这些col在不同屏幕大小时行为不同，见下图：

![Center][]

你也可以给一个div设置两个col-  class，以便适应不同的屏幕。值得一提的是，row的左右各有-15px margin值，被当作为row的 div 被约束在 container内边界与粉色区域重叠，但没超过。这负的15px margin 值把 row的推出了container 的 15px padding，并与之重叠，本质上讲就是负出去。

切记永远不要在container外用row，这样做是无效的。

3 col-

col在不同屏幕下行为不同，这在上面已经说过了。

列(col)现在有15px的padding了，如下图中黄颜色部分。Container的正padding值造成了15px的留空，row用负margin值反的延伸回去，所以现在col的padding值与container的padding重叠，永远不要在row外使用col,在row外使用col是无效的。

4 嵌套

当你设置了container,row,column后，你可以在column内再创建新的栅格系统。你在列(col)内添加新的行(row)时不需再嵌container了。这个技巧在于列(col)扮演了container一样的角色，列也有15px的padding值，它一样允许行(row)的负margin值,它内部的列、内容间的补白等都一样能很好的工作了。

5 隐藏显示

col-\*-\*  
                第一个参数  xs sm md lg  
                xs 带这个标识的样式  在超小屏设备以上都生效  
                sm 带这个标识的样式  在小屏设备以上都生效  
                md 带这个标识的样式  在中屏设备以上都生效  
                lg 带这个标识的样式  在大屏设备生效  
                第二个参数  1-12  默认分成12等份

> <table> 
>  <thead> 
>   <tr> 
>    <th>&nbsp;</th> 
>    <th>超小屏幕<br> 手机 (&lt;768px)</th> 
>    <th>小屏幕<br> 平板 (≥768px)</th> 
>    <th>中等屏幕<br> 桌面 (≥992px)</th> 
>    <th>大屏幕<br> 桌面 (≥1200px)</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>.visible-xs-*</td> 
>    <td>可见</td> 
>    <td>隐藏</td> 
>    <td>隐藏</td> 
>    <td>隐藏</td> 
>   </tr> 
>   <tr> 
>    <td>.visible-sm-*</td> 
>    <td>隐藏</td> 
>    <td>可见</td> 
>    <td>隐藏</td> 
>    <td>隐藏</td> 
>   </tr> 
>   <tr> 
>    <td>.visible-md-*</td> 
>    <td>隐藏</td> 
>    <td>隐藏</td> 
>    <td>可见</td> 
>    <td>隐藏</td> 
>   </tr> 
>   <tr> 
>    <td>.visible-lg-*</td> 
>    <td>隐藏</td> 
>    <td>隐藏</td> 
>    <td>隐藏</td> 
>    <td>可见</td> 
>   </tr> 
>  </tbody> 
>  <tbody> 
>   <tr> 
>    <td>.hidden-xs</td> 
>    <td>隐藏</td> 
>    <td>可见</td> 
>    <td>可见</td> 
>    <td>可见</td> 
>   </tr> 
>   <tr> 
>    <td>.hidden-sm</td> 
>    <td>可见</td> 
>    <td>隐藏</td> 
>    <td>可见</td> 
>    <td>可见</td> 
>   </tr> 
>   <tr> 
>    <td>.hidden-md</td> 
>    <td>可见</td> 
>    <td>可见</td> 
>    <td>隐藏</td> 
>    <td>可见</td> 
>   </tr> 
>   <tr> 
>    <td>.hidden-lg</td> 
>    <td>可见</td> 
>    <td>可见</td> 
>    <td>可见</td> 
>    <td>隐藏</td> 
>   </tr> 
>  </tbody> 
> </table>

> 从 v3.2.0 版本起，形如 .visible-\*-\* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
> 
> <table> 
>  <thead> 
>   <tr> 
>    <th>类组</th> 
>    <th>CSS display</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>.visible-*-block</td> 
>    <td>display: block;</td> 
>   </tr> 
>   <tr> 
>    <td>.visible-*-inline</td> 
>    <td>display: inline;</td> 
>   </tr> 
>   <tr> 
>    <td>.visible-*-inline-block</td> 
>    <td>display: inline-block;</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> 因此，以超小屏幕（xs）为例，可用的 .visible-\*-\* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
> 
> .visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。

[原文链接][bootstrap _]

[bootstrap _]: https://www.cnblogs.com/wangyihong/p/7127742.html
[Container]: http://lib.csdn.net/base/docker
[Center]: /images/20220512/f1fb1eaba57f40beaf6e5cadaefaa5fb.png