我需要製作一個類似於此站點底部的引導腳註http://drantipov.com/。但我不需要它是「.container-fluid」,我希望它是一個響應固定寬度的容器 - 「.container」。我不想讓它變得粘稠。我只需要知道如何製作帶有鏈接的3列。沒有帶有標誌的列。有人可以幫幫我嗎?使用Bootstrap製作頁腳
回答
爲您建立一個小提琴,檢查出來:
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
}
謝謝。但它似乎並不奏效。所有3
在彼此之下。 –用小提琴爲2.3.2更新了答案 – patricmj
這很有效。謝謝!我看到代碼沒有任何.col-md-4或其他東西。大。再次感謝! –
試試這個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;
}
}
謝謝。但它仍然不起作用。不過,我認爲我可能知道這個問題。難道是因爲我在使用Bootstrap v2.3.2嗎?我使用的是這個版本,因爲我的網站看起來很小而且很小 - 這是我需要的。但是當我嘗試使用Bootstrap v3.3.5 - 新版本時 - 我無法做出我需要的設計。 –
- 1. Twitter Bootstrap - 製作頁腳全寬
- 2. 如何使用bootstrap製作粘性頁腳?
- 3. 爲什麼Bootstrap頁腳不起作用?
- 4. Bootstrap CSS頁腳定製問題
- 5. Bootstrap 3「fluid」頁腳
- 6. 製作bootstrap 3固定頁腳,並提供滑動內容?
- 7. 如何在Bootstrap中製作960粘性頁腳?
- 8. 在Bootstrap中製作可展開的固定頁腳3
- 9. 在Bootstrap 3中製作可展開的固定頁腳?
- 10. 如何使頁腳在Bootstrap中響應
- 11. 爲Bootstrap list-group-items製作頁眉/頁腳的好方法是什麼?
- 12. 如何使用CSS製作此頁眉/內容/頁腳佈局?
- 13. 如何製作頁腳?
- 14. bootstrap模態頁腳問題
- 15. Bootstrap粘頭和頁腳
- 16. Bootstrap 3頁腳問題
- 17. Bootstrap頁腳旋轉問題
- 18. Bootstrap面板頁腳問題
- 19. Bootstrap 3 - 浮動頁腳
- 20. Bootstrap中的固定頁腳
- 21. Bootstrap固定頁腳移動
- 22. Bootstrap分頁不起作用
- 23. 如何使用twitter bootstrap製作2(frame?)?
- 24. 如何用jquerymobile製作粘性頁腳?
- 25. Material Design Lite和Bootstrap粘腳頁腳
- 26. 使用Bootstrap的模型,.modal頭文件和.modal頁腳不起作用
- 27. Twitter Bootstrap 3 - 靜態頁眉和頁腳
- 28. 在引號之外使用Bootstrap的頁腳和引用元素
- 29. 如何使用tableview製作粘性頁腳和標題?
- 30. 如何製作使用CSS鏈接的頁腳?
我試着做.row和.COL但他們沒有工作。 –
這不是你想要的嗎? http://jsfiddle.net/vm3m74q1/8/ – patricmj
好吧,挺好。我需要那裏有樹列。留下一個,中間一個,和正確的一個。每次我嘗試做「col-md-4」,但它不起作用。也許這是因爲我使用Bootstrap v2.3.2? –