Bootstrap 3：根據頁面設置自定義容器大小

Question

我正在尋找一些不是默認容器大小的頁面。 例如，假設我的默認值是1170px（Bootstraps默認值）。然後說我想要一個大約8列寬的容器，基於默認的1170px寬度，這是780px。

我知道很多人的第一個想法是保持1170像素的容器，然後只使用8列，偏移量爲2，但是沒有得到我想要的結果。因爲這會導致頁面在默認的1170px媒體查詢設置中調整大小。因此，我想要一個新的容器設置爲875px。

我首先想到的是做這樣的事情在SASS：

@for $i from 6 through 11 { 
    .layout-size-#{$i}{ 
    .main-cont{ 
     $container-width: (0.083333 * $i) * 1170px; // Single column width in percentage times # of columns, multiplied by max container width. 
     width: ceil($container-width); 
    } 
    } 
} 

然後我可以做各種媒體查詢中類似的東西，以根據需要修改每個屏幕尺寸。思考？有更好的方法嗎？

Answer 1

好的，我相信我現在有這個工作。我最初的問題並不完全正確。我想出了是這樣的：

@for $i from 6 through 10 { 
    $container-width: ceil((0.083333 * $i) * 1170px); // Single column width in percentage times # of columns, multiplied by max container width. 
    @media (min-width: ($container-width + $grid-gutter-width)) { 
    .layout-size-#{$i}{ 
     .main-cont{ 
     width: $container-width; 
     } 
    } 
    } 
} 

這樣做是設立了多個定在每個可能的容器（加上排水溝）的寬度媒體查詢。所以，如果我們想要一個容器與6列的寬度相匹配（對於12列，基準爲1170px），那麼它將是585px。然後我們設置一個類來設置容器的寬度。假設我的類「layout-size-6」在body元素上設置。假定類「main-cont」與「容器」類位於相同的元素上。

最終，這允許視口在縮放到由Bootstrap的媒體查詢設置的默認寬度之前縮小到容器的一樣小。

產生的CSS：

@media (min-width: 615px) { 
    .layout-size-6 .main-cont { 
    width: 585px; 
    } 
} 
@media (min-width: 713px) { 
    .layout-size-7 .main-cont { 
    width: 683px; 
    } 
} 
@media (min-width: 810px) { 
    .layout-size-8 .main-cont { 
    width: 780px; 
    } 
} 
@media (min-width: 908px) { 
    .layout-size-9 .main-cont { 
    width: 878px; 
    } 
} 
@media (min-width: 1005px) { 
    .layout-size-10 .main-cont { 
    width: 975px; 
    } 
} 

你可以，當然，修改FOR或多或少容器大小聲明。