精品人妻受辱AV在线电影_91精品国产薄丝高跟在线播_国产成人二区三区不卡在线_亚洲Av无码乱码在线观看_亚洲国产成人无码aV白丝在线

0712-2888027 189-8648-0214
微信公眾號

孝感風信網(wǎng)絡科技有限公司微信公眾號

當前位置:主頁 > 技術(shù)支持 > HTML5/CSS3 > bootstrap柵格系統(tǒng)顯示5列的方法

bootstrap柵格系統(tǒng)顯示5列的方法

時間:2016-06-24來源:風信官網(wǎng) 點擊: 1820次
在 head  里加載 bootstrap 的 css 之后

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可選的Bootstrap主題文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

自己再添加幾個 css class

<style>
.col-lg-2dot4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 1200px) {
.col-lg-2dot4 {
float: left;
}
.col-lg-2dot4 {
width: 20%;
}
.col-lg-pull-2dot4 {
right: 20%;
}
.col-lg-push-2dot4 {
left: 20%;
}
.col-lg-offset-2dot4 {
margin-left: 20%;
}
}
</style>

后需要顯示 5 列的地方應用這個 class 即可

<div class="col-lg-2dot4"></div>
<div class="col-lg-2dot4"></div>
<div class="col-lg-2dot4"></div>
<div class="col-lg-2dot4"></div>
<div class="col-lg-2dot4"></div>
欄目列表
推薦內(nèi)容
熱點內(nèi)容
展開