bootstrap栅格系统自定义列

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

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

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

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

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

代码交流 2021