使用Bootstrap製作頁腳

Question

我需要製作一個類似於此站點底部的引導腳註http://drantipov.com/。但我不需要它是「.container-fluid」，我希望它是一個響應固定寬度的容器 - 「.container」。我不想讓它變得粘稠。我只需要知道如何製作帶有鏈接的3列。沒有帶有標誌的列。有人可以幫幫我嗎？

Answer 1

爲您建立一個小提琴，檢查出來：

http://jsfiddle.net/vm3m74q1/7/

要使你可以加3列n使用引導程序。你可以閱讀更多關於自舉列在這裏：http://getbootstrap.com/css/#grid

<div class="container"> 
    <nav class="row" role="navigation"> 
     <div class="col-sm-4 center"><p>Content here</p></div> 
     <div class="col-sm-4 center"><p>Content here</p></div> 
     <div class="col-sm-4 center"><p>Content here</p></div> 
    </nav> 
</div> 

CSS爲中心：

.center { 
    text-align: center; 
} 

加了一個新的撥弄引導2.3.2：http://jsfiddle.net/vm3m74q1/11/

自舉2.3.2你需要使用span作爲div類（使用span 4更改col-sm-4以獲得相同效果），就像這樣。

<div class="container"> 
    <nav class="row" role="navigation"> 
     <div class="span4"><p>Content here</p></div> 
     <div class="span4"><p>Content here</p></div> 
     <div class="span4"><p>Content here</p></div> 
    </nav> 
</div> 

要刪除的空間之間，你需要刪除.span4的保證金和變動幅度，更新小提琴：http://jsfiddle.net/vm3m74q1/12/

.span4 { 
    background: red; 
    margin:0; 
    width: 33.3% 
} 

nav { 
    margin: 0 
} 

.row { 
    margin:0 
} 

Answer 2

試試這個Courtsey GetBootstrap的： http://codepen.io/anon/pen/zGpPjX

//Needed since no content 
<div id="wrap"> 
     <div id="push"></div> 
    </div> 

    <div id="footer"> 
     <div class="container"> 
     <div class="col-md-4"> 
     <p>content</p> 
     </div> 
     <div class="col-md-4"> 
     <p>content</p> 
     </div> 
     <div class="col-md-4"> 
     <p>content</p> 
     </div> 
     </div> 
    </div> 

CSS：

html, 
     body { 
     height: 100%; 
     /* The html and body elements cannot have any padding or margin. */ 
     } 

     #wrap { 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     /* Negative indent footer by it's height */ 
     margin: 0 auto -60px; 
     } 

     /* Set the fixed height of the footer here */ 
     #push, 
     #footer { 
     height: 60px; 
     } 
     #footer { 
     background-color: #f5f5f5; 
     } 

     /* Lastly, apply responsive CSS fixes as necessary */ 
     @media (max-width: 767px) { 
     #footer { 
      margin-left: -20px; 
      margin-right: -20px; 
      padding-left: 20px; 
      padding-right: 20px; 
     } 
     }