Bootstrap 3 - 爲桌面設置最大容器寬度爲940px？

我正在使用Twitter Bootstrap 3爲網站添加一個全新的部分，但容器不能超過940像素的Desktop寬度，因爲它會丟棄頁眉和頁腳{includes}。Bootstrap 3 - 爲桌面設置最大容器寬度爲940px？

因此，940px在12 x 60 = 720px的列中工作，11 x 20 = 220px的水槽。不夠公平，但是如何將這些輸入到Bootstrap 3中，因爲在Customize部分中沒有'@ColumnWidth字段/設置？

我嘗試了將@ container-lg-desktop和@ container-desktop都設置爲940px--但它不起作用。

2013-10-17 ubique

首先考慮小網格，請參閱：http://getbootstrap.com/css/#grid-options。 750像素的最大容器寬度將可能小你（也閱讀：Why does Bootstrap 3 force the container width to certain sizes?）

當使用小格使用媒體查詢來設置最大容器寬度：

@media（最小寬度： 768px）{ .container { max-width：750px; } }

其次也讀過這個問題：Bootstrap 3 - 940px width grid?，可能重複？

12×60 = 720像素的列和11×20 = 220px

也會有的20像素網格上的兩側上的溝槽，以便220 + 720 + 40使得980px

有「不」 @ColumnWidth

您colums寬度將根據在variables.less設置動態計算。你可以設置@grid-columns和@grid-gutter-width。一列的寬度將被設置爲通過在grid.less mixins.less的百分比：

.calc-grid(@index, @class, @type) when (@type = width) { 
    [email protected]{class}[email protected]{index} { 
    width: percentage((@index/@grid-columns)); 
    } 
}

更新集@網格溝寬度改爲20 px ;, @容器桌面：940px ;, @容器大型桌面：@容器桌面並重新編譯bootstrap。

來源

2013-10-17 18:56:33

對於這個項目來說，小網格太小了，因爲需要達到940px，就像網站的其他部分一樣。您對「重複」的引用 - 我在發佈我的問題之前嘗試過，並沒有解決問題？謝謝。 – ubique

查看更新 –

Hi-bit confused here !?你有'容器桌面'寫了兩次，一個值爲940px，另一個沒有？ – ubique

在Bootstrap 3中有一個更簡單的解決方案（IMO），不需要編譯任何自定義的LESS。您只需在「層疊樣式表」中利用級聯。

設置你的CSS加載像這樣...

<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" /> 
<link type="text/css" rel="stylesheet" href="/css/custom.css" />

哪裏/css/custom.css是你獨特的風格定義。在這個文件中，添加以下定義...

@media (min-width: 1200px) { 
    .container { 
    width: 970px; 
    } 
}

這將覆蓋引導的默認設置width: 1170px當視是1200像素或更大。

測試Bootstrap 3.0。2

來源

2013-11-22 01:20:04

當我需要在單個css文件中聲明所有內容時，例如在CodePen內部，我該怎麼做？即使使用'！important'標籤，它似乎也不起作用。 – chiffa

如果一切都存在於單個文件中，我相信只要確保我上面爲'custom.css'概述的定義最終位於文件的最底部*就可以使其工作。這應該確保他們最後得到應用。未經測試，YMMV。 –

不幸的是我在CodePen中測試了它，但沒有成功。我會盡力弄清楚，謝謝你的迴應。 – chiffa

最好的選擇是使用原始LESS版本的bootstrap（從github獲取它）。

打開variables.less，尋找//媒體查詢斷點

查找這個代碼，並改變斷點值：

// Large screen/wide desktop 
@screen-lg:     1200px; // change this 
@screen-lg-desktop:   @screen-lg;

將其更改爲9999px例如，這將阻止斷點因此您的網站將始終加載以前的媒體查詢，其中包含940像素的容器

來源

2013-12-16 22:08:11 Snade

如果您不希望編譯引導程序，請複製以下內容並將其插入到您的自定義css文件中。不建議更改原始引導程序的css文件。另外，如果您從cdn加載它，您將無法修改引導程序原始css。

在自定義的CSS文件粘貼此：

@media (min-width:992px) 
    { 
     .container{width:960px} 
    } 
@media (min-width:1200px) 
    { 
     .container{width:960px} 
    }

我我的容器這裏設置爲960像素的任何東西，可容納它，並保持休息介質尺寸爲默認值。您可以將其設置爲940px以解決此問題。

來源

2015-02-25 08:05:13

如果如果不工作，然後用

@media（最小寬度：1200像素）{ .container { 寬度：「重要！」！970像素重要; } }

來源

2015-05-29 18:59:48 ziaprog

Bootstrap 3 - 爲桌面設置最大容器寬度爲940px？

回答

相關問題