引導100％寬/全寬

我想創建一個引導一個新的網站，我需要它是寬100％，但我不希望它是液體。至少現在不行。引導100％寬/全寬

我遇到的問題是：使用bootstrap標準將您限制爲960像素，並且流體佈局爲全寬度，但行爲類似於流體佈局，應當通過移動元素在窗口縮小時變爲堆疊狀態。

有沒有辦法使靜態引導佈局具有100％的寬度？

來源

2013-03-04 Somk

只是改變.container到你需要的大小？ – Dreamwalker 2013-03-04 15:26:30

100％始終是一個相對值。您應該以像素爲單位更改容器寬度。 – JimmyRare 2013-03-04 15:36:36

100％的寬度...靜態

這有點一個矛盾的。 100％寬度佈局不是靜態的。

引導使用.container類來設置預定的寬度。如果您希望它大於默認值，請將其增加到所需的頁面寬度。請注意，Bootstrap的span*和offset*類的大小將需要相應地調整其寬度。

來源

2013-03-04 15:43:44

謝謝你的幫助。是的，你說得沒錯這是一個矛盾，所以我想我真的是問我怎麼能有一個流體佈局不疊加的跨度。 – Somk 2013-03-04 15:45:00

您能否詳細說明「堆棧跨度」？ Bootstrap有12種不同的'span *'大小。 '.span1'可以在'.container'的一行內適合12次，而'span12'只適合一次。只要你的'span *'元素不超過它們容器的跨度寬度，你就不應該把它們堆疊起來。 – 2013-03-04 15:48:08

一個例子引導佈局可以是：'容器（行（span12（行（span6（行（span3，span3）），span6（行（跨距2，span4）））））'注意'row'類被使用。確定元素的新行，如果沒有它，利潤將超過容器的限制 – 2013-03-04 15:50:13

我想你的意思是你不想邊緣/填充兩側。（這是您的信息的唯一途徑 - 百分之百的寬度將佔用整個屏幕的大小，因此它絕不會是靜態的 - 尺寸將根據窗戶的大小而變化）

我們沒有一個用例或者JSFiddle，所以我不能給你確切的代碼，但是你需要確保你的body有margin：0和padding：0，然後用Firebug或Chrome Web Dev工具查找其他div。

如果你希望你的佈局是流體，但在某一點停止生長，那麼你就需要應用最大寬度：1000像素（例如），你的身體或你的一般容器/包裝元素。

來源

2013-03-04 16:15:25

只是不包括bootstrap-responsive.css以禁用響應功能。

如果您不想要.container排水溝/保證金，您可以將您的內容放在容器外，但請記住，您必須自行維護您的內容佈局（仍然可以使用網格，但失去了將內容居中的能力）和不要忘記大部分Bootstrap組件，如.navbar需要.container來控制其寬度。

我的一個工作，需要一個完整的屏幕旋轉木馬持有的所有內容，所以我總結我的內容與.container居中內容。

enter image description here

來源

2013-03-05 03:49:25 lngs

是完全固定我的問題.row> .container>。內容 – Jake 2013-07-06 06:33:05

這是很容易在引導3來實現的，只是你自己更換.container格：

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
}

感謝埃裏克花爲單挑： http://www.helloerik.com/bootstrap-3-grid-introduction#fluid

UPDATE

Bootstrap 3現在提供內置流體容器類，只需使用<div class="container-fluid">即可。See docs.

來源

2013-09-13 10:16:45

我不能完全弄清楚如何回答的主要問題，但在這裏就是你想要的OP

正如上面所說的，不使用.container，用你自己的類，如：

.my-fluid-container { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: auto; 
    margin-right: auto; 
}

然後，當你建立你的網格，只需使用COL-XS-*爲列。您現在將有一個100％寬度的網站，不會在「移動」視圖中進行堆疊。歡迎到了90年代;）

來源

2013-10-09 19:36:04 helloerik

這是自舉3 - 。原來的問題和答案似乎成爲引導2.3 – helloerik 2013-10-09 19:37:12

另外，你欺騙已經給你信用的答案！哈哈 – 2013-10-09 19:53:34

引導100％寬/全寬

回答

相關問題