Question

我正在学习与Bourbon Neat一起工作，我总是使用Bootstrap的网格系统。我正在尝试重新创建this Bootstrap grid page来学习Bourbon Neat的基础知识。

我使用的设置是：

// Bourbon Neat Grid Settings
$column: 70px;
$gutter: 30px;
$grid-columns: 12;
$max-width: em(1170);
$visual-grid: true;

我确定了断点并使用new breakpoint函数设置它们，我也可以在其中更改列数。

但我想改变的是容器大小。在Bootstrap中，容器的最大宽度如下所示：

@media＆gt; 1200px： max-width：1170px;

@media＆gt; 992px： max-width 970px;

@media＆gt; 768px：最大宽度：750px;

然而，在Bourbon Neat中，最大宽度用变量设置一次。我目前将它设置为max-width: em(1170);我怎样才能让这个容器大小变化？如何使用Bourbon Neat而不是Bootstrap 3实现相同的示例页面？我知道在Susy你可以set the container width

Answer 1

哇。这是多么令人困惑的话题。但感谢dasginganinja正确解释它。问题不在于如何更改最大宽度属性，而是如何更改Neat的$max-width变量以正确显示Neat的可视网格。要重申dasginganinja所说的内容，您无法完全操纵变量，但可以定位body:before并设置与outer-container()宽度匹配的max-width属性。 MandsAtWork处于正确的轨道，但您可以在不需要编辑核心文件的情况下完成此操作。例如：

@import "bourbon";
@import "neat-helpers"; //IMPORTANT: ADD BEFORE GRID SETTINGS

// Visual Grid
$visual-grid: true;
$visual-grid-color: #d4d4d4;
$visual-grid-opacity: 0.3;

// Initial Grid Settings
$max-width: 100%;
$grid-columns: 4;

// Breakpoints
$sm_val:  480px;
$md_val:  640px;
$lg_val:  800px;
$xl_val:  1000px;
$xxl_val: 1400px;

$sm:  new-breakpoint(min-width $sm_val 6);
$md:  new-breakpoint(min-width $md_val 7);
$lg:  new-breakpoint(min-width $lg_val 8);
$xl:  new-breakpoint(min-width $xl_val 9);
$xxl: new-breakpoint(min-width $xxl_val 10);

@import "neat"; //IMPORTANT: ADD AFTER GRID SETTINGS

// Container
@mixin container {
    @include outer-container(100%);

    @include media($sm) {
        @include outer-container($sm_val);
    }

    @include media($md) {
        @include outer-container($md_val);
    }

    @include media($lg) {
        @include outer-container($lg_val);
    }

    @include media($xl) {
        @include outer-container($xl_val);
    }

    @include media($xxl) {
        @include outer-container($xxl_val);
    }
}

@if ($visual-grid) {
    body:before {
        @include container;
    }
}

Answer 2

以下内容可能有效：

$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;
}

我很想听听您的反馈意见。

Answer 3

您可以在设置中使用一些CSS / SCSS覆盖来执行此操作。

让我们假设您在SCSS文件中有这个，这是Bourbon Neat中的标准：

$max-width: 1000px;

@import "bourbon/bourbon";
@import "neat/neat";

.outer-container{
   @include outer-container;
}

目前，使用外部容器包装的任何内容都将具有最大宽度1000px（在您的示例中为1170em）。

要在不同的屏幕尺寸/媒体查询中更改容器的最大宽度，您可以在这些行之后包含取代原始声明的媒体查询，例如

.outer-container{
   max-width: 800px;
   @media all and (min-width: 750px){
    max-width:1500px;
  }
}

在此示例中，最大宽度最终将为800px宽，除非屏幕尺寸大于749px，在这种情况下，最大宽度将为1500px。

这是一个过于简单的过度骑行，感觉有点hackish，但应该完成工作，你不必担心它一旦设置。如果Bourbon Neat有一个正确的方法来做到这一点我没有注意到它。

Answer 4

我认为这会回答你的问题：

您可以更改$max-width中的_grid-settings.scss变量值，然后将该样式表导入基本苦味样式表，即_bitters.scss。

如果您在未导入$max-width的情况下更改_grid-settings.scss的值，则outer-container宽度不会发生任何变化。

Answer 5

如果您需要visual-grid也能正常显示（就像我一样），您可以将媒体查询添加到`neat / grid / _visual-grid.scss文件中的visual-grid mixin。编辑核心整齐的文件显然不是很理想，但我想不出另一种方法。

        @mixin grid-column-gradient($values...) {
      background-image: -webkit-linear-gradient(left, $values);
      background-image: -moz-linear-gradient(left, $values);
      background-image: -ms-linear-gradient(left, $values);
      background-image: -o-linear-gradient(left, $values);
      background-image: unquote("linear-gradient(to left, #{$values})");
    }

    @if $visual-grid == true or $visual-grid == yes {
      body:before {
        content: '';
        display: inline-block;
        @include grid-column-gradient(gradient-stops($grid-columns));
        height: 100%;
        left: 0;
        margin: 0 auto;
        max-width: $max-width;
        opacity: $visual-grid-opacity;
        position: fixed;
        right: 0;
        width: 100%;
        pointer-events: none;

        @if $visual-grid-index == back {
          z-index: -1;
        }

        @else if $visual-grid-index == front {
          z-index: 9999;
        }

        @each $breakpoint in $visual-grid-breakpoints {
          @if $breakpoint {
            @include media($breakpoint) {
              @include grid-column-gradient(gradient-stops($grid-columns));
            }
          }
        }

        // HACK to get visual grid to display our max-width at our media queries
        @include media($large-screen)  { max-width: 1170px; }
        @include media($medium-screen) { max-width:  970px; }
        @include media($small-screen)  { max-width:  750px; }
      }

    }

很想听别人的解决方案

Answer 6

由于我无法发表评论，我想建立使用名为bootstrap-container的mixin的Andrew Hacking's answer。 Voodoocode的评论说，这对视觉网格不起作用，因为它不接触$ max-width变量。为了使它工作，你需要一段代码来设置body的最大宽度：之前。它的工作原理如下：

@if ($visual-grid) {
 body:before {
   @include bootstrap-container;
 }
}

一旦这样做，外部容器宽度设置将在网格上生效。

与Bourbon Neat相比，外部容器尺寸不同

6 个答案: