Bootstrap V3 重新定义col的宽度

未来已存在

于 2023-02-01 14:04:08 发布

阅读量405

点赞数

文章标签： bootstrap 前端 javascript

本文链接：https://blog.youkuaiyun.com/cm2010_03_31/article/details/128832765

版权

文章介绍了如何在Bootstrap的12列网格系统中创建自定义的列宽，如4/5列宽，通过定义额外的CSS类来实现。这种方法允许混合使用标准列宽和新定义的宽度，以适应不同场景的需求。关键在于确保总列数不超过12，以保持布局的响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有的时候col的宽度2列太宽，1列又太窄，那么就需要重新定义一个中间宽度，和标准用法混合使用

对于12列网格,如果要为每个列宽添加一半列(4,16667%).这是你做的.

例如,对于col-md-x,使用以下值定义.col-md-x-5.

.col-md-1-5 { width: 12.5%; } 
.col-md-2-5 { width: 20.83333%; }
.col-md-3-5 { width: 29.16667%; }
.col-md-4-5 { width: 37.5%; }
.col-md-5-5 { width: 45.83333%; }
.col-md-6-5 { width: 54.16667%; }
.col-md-7-5 { width: 62.5%; }
.col-md-8-5 { width: 70.83333%; }
.col-md-9-5 { width: 79.16667%; }
.col-md-10-5 { width: 87.5%; }
.col-md-11-5 { width: 95.8333%; }

舍入了某些值.

其次,为避免从原始col-md-x复制css代码,请在类声明中使用它们.请注意,应在修改之前添加它们.这样,只有宽度被覆盖.

<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>

最后,不要忘记总数不应超过12列,总计100%.