5

我正在学习使用 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 中你可以设置容器宽度

4

6 回答 6

5

哇。这是一个多么令人困惑的话题。但感谢 dasginganinja 正确解释它。问题不在于如何更改最大宽度属性，而是如何更改 Neat 的$max-width变量以正确显示 Neat 的可视网格。重申一下 dasginganinja 的意思，您不能完全操纵变量，但您可以定位body:before并设置与您的宽度相匹配的 max-width 属性outer-container()。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;
    }
}
于 2015-09-18T16:41:55.507 回答
1

像下面这样的东西可能会起作用：

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

我很想听听您的反馈。

于 2014-03-07T14:49:47.260 回答
0

您可以在设置中使用一些 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;
  }
}

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

这是一个简单的过度骑行，感觉有点骇人听闻，但应该可以完成工作，并且一旦设置您就不必担心它。如果 Bourbon Neat 有适当的方法来做到这一点，我没有注意到。

于 2014-01-07T07:10:03.057 回答
0

我想这会回答你的问题：

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

如果您在$max-width不导入的情况下更改值，您将看到宽度_grid-settings.scss没有变化。outer-container

于 2014-04-19T00:38:33.967 回答
0

如果您还需要visual-grid正确显示（就像我一样），您可以将媒体查询添加到visual-grid mixin`neat/grid/_visual-grid.scss 文件中。编辑核心整洁文件显然并不理想，但我想不出另一种方法来做到这一点。

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

    }

很想听听其他人的解决方案

于 2014-11-07T23:03:16.403 回答
0

由于我无法发表评论，我想以Andrew Hacking 的答案为基础，该答案使用名为bootstrap-container. Voodoocode 的评论说这对视觉网格不起作用，因为它不触及 $max-width 变量。为了让它工作，你需要一段代码来设置 body:before 的最大宽度。它会这样工作：

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

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

于 2015-06-22T19:03:48.803 回答