Maison > interface Web > tutoriel HTML > 关于 bootstrap 3 显示 5 列的问题_html/css_WEB-ITnose

关于 bootstrap 3 显示 5 列的问题_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 12:05:35
original
1085 Les gens l'ont consulté

bootstrap是个好东西,对于CSS不是很熟悉的同学可以用它快速的做个不丑的网站。

 

但是bootstrap是个12栅格的系统,显示5列比较麻烦,今天我也刚好有这个需求,就稍微研究了下,并且成功了。具体的做法是:

 

在 head  里加载 bootstrap 的 css  之后

自己再添加几个 css class

 1 <style> 2 .col-lg-2dot4 { 3 position: relative; 4 min-height: 1px; 5 padding-right: 15px; 6 padding-left: 15px; 7 } 8 @media (min-width: 1200px) { 9 .col-lg-2dot4 {10 float: left;11 }12 .col-lg-2dot4 {13 width: 20%;14 }15 .col-lg-pull-2dot4 {16 right: 20%;17 }18 .col-lg-push-2dot4 {19 left: 20%;20 }21 .col-lg-offset-2dot4 {22 margin-left: 20%;23 }24 }25 </style>
Copier après la connexion

 

然后需要显示 5 列的地方应用这个 class 即可

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal