> 웹 프론트엔드 > HTML 튜토리얼 > 关于 bootstrap 3 显示 5 列的问题_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 12:05:35
원래의
1084명이 탐색했습니다.

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>
로그인 후 복사

 

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿