需要引導建立更廣泛的容器 - 1920px

Question

我已經.PSD爲客戶網站設計，平面設計師畫了容器寬度可達1920px，我需要幫助如何正確設置容器的寬度1920px。

我知道如何設置較小的

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

Answer 1

就重用你有以上媒體查詢，並簡單地決定何時你想要的容器更改爲尺寸（大於1920px更大的事物）。或者，當你再次讀到你的問題時，你說，「高達1920像素」，所以一個流體容器？ 然後，只需設置：

.container { 
     max-width: 1920px; 
     width: 100%; 
} 

Answer 2

您的問題不夠清楚。但如果你想建立1920px寬的容器，只是覆蓋使用「！重要的」默認的容器寬度。這樣，

.container { width: 1920px !important; } 

或者，如果你想1920px容器僅適用於較大的顯示器，您可以使用媒體查詢這個樣子，

@media (min-width: 2400px) { 
    .container { 
     width: 1920px; 
    } 
} 

此規則將僅適用於顯示至少是2400px寬。

Answer 3

您可以覆蓋自舉的默認樣式爲上述問題的答案描述，或者你可以創建一個新的類，如：

.container.wide { 
    width: 1920px; 
} 

然後將該類添加到容器<div>的如：

<div class="container wide"> 
    CONTENT 
</div> 

這確保只有<div>的您添加wide類纔會生效，這意味着如果需要，您仍然可以使用<div class="container">來獲得正常的BootStrap容器行爲。

Answer 4

根據你的反應，你可能想

.container{ 
 
    width: 1920px !important; 
 
}

雖然我不明白爲什麼:)。在每個較小的分辨率上，它現在將滾動。

Answer 5

您可能需要查看位於Bootstrap打包的css中的.container-fluid，而不是將容器強制爲1920px並覆蓋默認的引導程序網格大小。

集裝箱

引導需要包含的元素來包裝網站內容和容納我們的電網系統。您可以選擇兩個容器中的一個用於您的項目。請注意，由於填充等原因，兩個容器都不能嵌套。

使用.container用於響應固定寬度的容器。

<div class="container"> 
    ... 
</div> 

對於全寬度容器使用.container-fluid，跨越視口的整個寬度。

<div class="container-fluid"> 
    ... 
</div> 

鏈接：http://getbootstrap.com/css/#overview-container