• <dl id="2u8ki"><small id="2u8ki"></small></dl>
    • <rt id="2u8ki"><em id="2u8ki"></em></rt>
    • <menu id="2u8ki"></menu>
      0712-2888027 189-8648-0214
      微信公眾號

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

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

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

      時(shí)間:2016-06-24來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 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文件。務(wù)必在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>

      自己再添加幾個(gè) 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 列的地方應(yīng)用這個(gè) 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>
      熱門關(guān)鍵詞: bootstrap 柵格系統(tǒng) 顯示5列
      欄目列表
      推薦內(nèi)容
      熱點(diǎn)內(nèi)容
      展開
      中文字幕无码AV黄片,亚洲天堂日本美女,国产亚洲色婷婷久久99精品91,午夜无码不卡视频 99久色图精品国产 精品熟女少妇A∨免费久久
    • <dl id="2u8ki"><small id="2u8ki"></small></dl>
      • <rt id="2u8ki"><em id="2u8ki"></em></rt>
      • <menu id="2u8ki"></menu>