Bootstrap 3：根据页面设置自定义容器大小

我正在寻找一些不是默认容器大小的页面。例如，假设我的默认值是1170px（Bootstraps默认值）。然后说我想要一个大约8列宽的容器，基于默认的1170px宽度，这是780px。Bootstrap 3：根据页面设置自定义容器大小

我知道很多人的第一个想法是保持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); 
    } 
    } 
}

然后我可以做各种媒体查询中类似的东西，以根据需要修改每个屏幕尺寸。思考？有更好的方法吗？

来源

2014-03-25 Nil

你知道你有col-md。 col-sm等。要控制列的浮动，对吗？ – ravb79

是的，但我的问题不在定位列。这是在容器决定调整大小时的设置。我不想容器在必要之前调整大小。因此，如果我将页面设置为10列，则当窗口达到默认的12列宽度时，不应将其调整为较小的大小。那有意义吗？ – Nil

好的，我相信我现在有这个工作。我最初的问题并不完全正确。我想出了是这样的：

@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或多或少容器大小声明。

来源

2014-03-25 18:02:23 Nil

Bootstrap 3：根据页面设置自定义容器大小

回答

相关问题