Bootstrap 100％寬度/全寬

Question

我想用Bootstrap創建一個新的網站，我需要它的寬度為100％，但我不希望它是流暢的。 至少現在不行。

我遇到的問題是：使用bootstrap標准限制你到960px並且流體布局它是全寬的，但是當窗口縮小時，應該通過移動元素來堆疊成流動布局。

有沒有辦法在靜態引導程序布局中使用100％寬度？

Answer 1

這很容易在Bootstrap 3中實現，只需用你自己的替換.container div：

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

UPDATE

Bootstrap 3現在提供了一個內置的流體容器類，只需使用<div class="container-fluid"> 。 查看文檔。

Answer 2

100％寬度......靜態

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

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

Answer 3

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

如果您不想要.container裝訂線/保證金，您可以將您的內容放在容器外面，但請記住，您必須自己維護內容布局（仍然可以使用網格，但卻無法使內容居中）而不是忘記大部分的Bootstrap組件，比如.navbar需要.container來控制它的寬度。

我的一項工作需要一個全屏旋轉木馬來保存所有內容，所以我用.container包裝我的內容以使內容居中。

在此輸入圖像描述

Answer 4

我無法弄清楚如何回答主要問題，但這就是你想要的OP

如上所述，不要使用.container，使用自己的類，如：

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

然后在構建網格時，只需使用col-xs- *作為列。 現在，您將擁有一個100％寬度的站點，該站點不會在“移動”視圖中堆疊。 歡迎來到90年代;）

Answer 5

我想你的意思是你不希望邊緣有邊距/填充。 （這是你的信息有意義的唯一方式 - 100％的寬度將占據屏幕的整個尺寸，因此它永遠不會是靜態的 - 尺寸將根據窗口的大小而改變）

我們沒有你的用例或JSFiddle所以我不能給你確切的代碼但是你需要確保你的身體有邊距：0和填充：0然后用Firebug或Chrome Web查找其他div開發工具。

如果您希望布局流暢但在特定點停止生長，則需要將max-width：1000px（例如）應用於您的身體或一般容器/包裝元素。