我正在学习与Bourbon Neat一起工作，并且我一直与Bootstrap的网格系统一起工作。我正在尝试重新创建此Bootstrap网格页面，以了解Bourbon Neat的基础知识。
我使用的设置是：
// Bourbon Neat Grid Settings
$column: 70px;
$gutter: 30px;
$grid-columns: 12;
$max-width: em(1170);
$visual-grid: true;
我确定了断点，并使用新的断点函数对其进行了设置，在该函数中，我还可以更改列数。
但是我要更改的是容器大小。在Bootstrap中，容器的最大宽度如下所示：
@media> 1200px：最大宽度：1170px;
@media> 992px：最大宽度970px;
@media> 768px：最大宽度：750px;
但是，在Bourbon Neat中，最大宽度使用一个变量设置一次。我目前将其设置为“max-width: em(1170);如何让这个容器的大小变化？” 如何使用Bourbon Neat（而不是Bootstrap 3）实现相同的示例页面？我知道在Susy中您可以设置容器宽度
类似以下内容可能会起作用：
$large-screen: new-breakpoint(max-width 1200px 12);
$medium-screen: new-breakpoint(max-width 992px 12);
$small-screen: new-breakpoint(max-width 768px 6);
@mixin bootstrap-container {
@include outer-container;
@include media($large-screen) { max-width: 1170px; }
@include media($medium-screen) { max-width: 970px; }
@include media($small-screen) { max-width: 750px; }
}
然后只需按以下方式使用mixin：
#foo {
@include bootstrap-container;
}
我很想听听您的意见。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句