2015-11-06 79 views
4

我在靜態網站中使用Bootstrap 3。在頁腳中,我有3列col-lg-4連續排列。3列垂直居中行Bootstrap 3

我的頁腳的樣子:

screenshot

我需要的是該行的3列像下面中心:

screenshot

這是我的代碼:

<!-- libraries for demo: --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
<!-- actual code: --> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
      <ul class="links"> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <ul class="links"> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
      </ul> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
      <ul class="links"> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
       <li><a>Sub Menu</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

小提琴:Here

+1

看一看山坳偏移 - 允許您specifiy假列之前的實際列給你你需要什麼 –

+0

這是你在找什麼我猜:http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns。如果不是,請嘗試添加邊距:auto;到外部div(與行類,包裝列) – Bram

+1

@Bram是一個遞歸的問題? :) –

回答

6

好,如果你的列各2自舉列寬,你可以使用以下命令:

<div class="col-lg-2 col-lg-offset-3> 
Menu 1 
</div> 
<div class="col-lg-2> 
Menu 2 
</div> 
<div class="col-lg-2> 
Menu 3 
</div> 
+0

謝謝@ MY1。這個答案解決了我的問題:) –

+1

沒問題。基本上BS中的網格存在12個色階,並且有偏移量,加上偏移量並將12除以2x3(6,你的色譜柱的總寬度),我們剩下6個,由2和你有你的抵消,但要提醒的是,抵消只能是一個整數,所以它不適用於任何地方。 – My1