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

    孝感風信網絡科技有限公司微信公眾號

    當前位置:主頁 > 技術支持 > HTML5/CSS3 > bootstrap柵格系統顯示5列的方法

    bootstrap柵格系統顯示5列的方法

    時間:2024-03-28來源:風信官網 點擊: 1568次
    在 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>
    熱門關鍵詞: bootstrap 柵格系統 顯示5列
    欄目列表
    推薦內容
    熱點內容
    展開
    动漫h精品无码一区二区三区,欧美日韩精品一区二区,午夜麻豆国产精品,加勒比中文字幕无码,亚洲日本va中文字幕区