Bootstrap：如何更改容器的寬度？

我已經使用Twitter Bootstrap開發了一個固定容器類的網站，但現在客戶希望網站的寬度爲1000px，而不是1170px。我不使用.less文件。Bootstrap：如何更改容器的寬度？

有沒有快速的方法來解決這個問題？

2013-04-08 alex

參考答案[這裏]（http://stackoverflow.com/questions/9780333/twitter-bootstrap-fluid-vs-fixed-then-add-in-responsive-how-does-it- all-fit-t），我認爲你的問題將在答案中由[Fixed-only fiddle]（http://jsfiddle.net/eterpstra/ZR4zz/3/）解決。 – prem 2013-04-08 16:39:15

@prem，tx但我沒有得到這個例子，因爲它沒有使用像span或container這樣的引導類。所有我認爲我需要這個項目的方法是使用響應式引導將容器的最大值設置爲940像素。 – alex 2013-04-08 17:59:15

你修好了嗎？ – prem 2013-04-11 04:13:22

轉到Bootstrap網站上的Customize部分，然後選擇您喜歡的尺寸。您必須設置@gridColumnWidth和@gridGutterWidth變量。

例如：@gridColumnWidth = 65px和@gridGutterWidth = 20px結果在1000px佈局。

然後下載它。

來源

2013-06-14 11:07:38 albertedevigo

通過更改gridColumnWidth和gridGutterWidth變量...因爲（12 *（gridColumnWidth）+ 12（gridGutterWidth））不等於1000，所以無法達到精確的1000px容器。所以只有我給出了該解決方案。那是對的嗎？ – prem 2013-06-14 12:40:10

+12

理論上，有無限組合匹配1000px。例如：12 * 65 + 11 * 20 = 1000（列之間只有11個排水溝）。 – albertedevigo 2013-06-14 14:09:59

呵呵！我真的不知道這件簡單的事情......反正你的是最合適的解決方案。 – prem 2013-06-14 14:18:14

你正在綁定一個背後說你不會使用LESS文件。我使用2.0構建了我的第一個Twitter Bootstrap主題，並且我在CSS中完成了所有操作 - 創建override.css文件。花了幾天才能讓事情正常工作。

現在我們有3.0。讓我向你保證，學習LESS需要的時間更少，如果你對CSS感到滿意，那麼學習LESS會比做所有瘋狂的CSS覆蓋更簡單。像你想要的改變是一塊蛋糕。

在Bootstrap 3.0中，容器類控制寬度，並調整所有包含的樣式以填充容器。容器寬度變量位於variables.less文件的底部。

// Container sizes 
// -------------------------------------------------- 

// Small screen/tablet 
@container-tablet:   ((720px + @grid-gutter-width)); 

// Medium screen/desktop 
@container-desktop:   ((940px + @grid-gutter-width)); 

// Large screen/wide desktop 
@container-lg-desktop:  ((1020px + @grid-gutter-width));

有些網站沒有任何足夠的內容來填補1020顯示或者你想爲美觀起見窄邊框。因爲BS使用12列網格我使用像960

來源

2013-10-25 17:26:23

工作，但：變量名稱是'@容器sm'，'@容器md'和'@容器lg'（現在） – 2015-04-01 12:00:00

@巴斯塔納好名字+1 – 2017-07-28 04:35:21

124

這裏多是解決方案：

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

這樣做，對定製引導作爲@Bastardo's答案的優勢在於，它不」 t更改Bootstrap文件。例如，如果使用CDN，您仍然可以從CDN下載大部分Bootstrap。

來源

2015-02-03 02:47:52 mcbjam

大多數答案忽略CDN。您的答案是完美的解決方案。 – 2015-08-13 18:29:45

它非常適合使用CDN的人。在構建時修改LESS（當4到達時，SASS）對於託管自己的Bootstrap CSS的人來說是完美的。但是，修改在提供的LESS（或SASS）之後導入的自定義LESS（或SASS）意味着您可以不進行（通常）差異式升級底層的LESS。 – 2015-08-25 18:03:14

我知道這真的很晚，但是如果您將寬度：自動添加到上面的代碼，您可以使容器的容量比它們的最大值更大。 – 2016-06-24 09:44:08

使用1000px寬度屬性設置您自己的內容容器類，然後使用container-fluid boostrap類而不是容器。

工程，但可能不是最好的解決方案。

來源

2015-02-27 10:33:01 Geo

@ mcbjam已經給出了這個答案，但是這裏有更多的解釋。

您可以輕鬆地使用CSS文件中的媒體查詢進行更改，無需下載BS。我只是做到了這一點，它的作品非常漂亮。

媒體查詢的「最小寬度」值將告訴CSS將容器的寬度更改爲1000px 只有的屏幕大於1200像素（或您選擇包含的任何寬度）。這可以保持您網站的響應能力，因此當屏幕尺寸跳過此值時（較小的顯示器，平板電腦，智能手機等），您的網站仍將進行調整以適應較小的屏幕。

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

來源

2015-04-07 16:41:13

使用包裝選擇器並創建一個在該包裝器內部具有100％寬度的容器來封裝整個頁面。

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style> 
<body> 
<div id="wrapper"> 
    <div class="container"> 
    <div class="row">....

現在，最大寬度設置爲1000px，你不需要更少或sass。

來源

2015-11-15 06:37:23

在你的CSS樣式中添加這些CSS。添加引導程序css文件後，爲了覆蓋它，最好添加它。

html, body { 
height: 100%; 
max-width: 100%; 
overflow-x: hidden; 
}`

來源

2016-04-23 12:43:20 Mahendra

Bootstrap：如何更改容器的寬度？

回答

相關問題