bootstrap栅格系统自定义列

Bootstrap栅格系统默认12列,但可通过覆盖样式实现自定义列数,例如在中等屏幕显示5列。文章解释了bootstrap3.x的col-xs、col-sm、col-md、col-lg四种栅格选项,适应不同屏幕尺寸,并提供了详细说明。

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

bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列

简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例:

<span style="font-size:12px;">/*一行5列*/
.col-md-5ths{position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}
.col-md-5ths{float: left;}
.col-md-5ths{width: 20%;}
.col-md-pull-2dot4{right: 20%;}
.col-md-push-2dot4{left: 20%;}
.col-md-offset-2dot4{margin-left: 20%;}
.pimgl img{float:right;}
.pimg img{float:left;}
.carousel-inner > .item > img{width:100%;}</span>


附:bootstrap不同屏幕对应的样式
bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm、col-md、col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值