清除Neat 2中的外部排水沟 [英] Remove outside gutters in Neat 2

问题描述

我已经升级到 Bourbon Neat v2 ，其中包括在左侧和右侧增加了装订线容器网格.

I've upgraded to Bourbon Neat v2 which includes the addition of gutters on the left and right side of the container grid.

在v1中，我可以在 span-columns中使用block-collapse mixin吃掉元素任一侧的装订线，但是，在v2中已删除了该mixin. v2中有一个网格崩溃函数，但是没有像我预期的那样工作.我当前的标记如下(为简便起见，已减少):

In v1 I could use block-collapse in the span-columns mixin to eat the gutters either side of the element, however, in v2 this mixin has been removed. There is a grid-collapse function in v2 but that doesn't quite work as I expected. My current markup is as below (reduced for brevity):

.wrapper {
  @include grid-container; // columns: 12, gutter: 1rem
  @include grid-visual(lime);
}

.sidebar {
  @include grid-columns(2 of 12);
}

.container {
  @include grid-columns(10 of 12);
}

如何移除外部水槽，使第2列和第2列之间的水槽塌陷? 3，以便我的侧边栏和容器彼此相邻放置?

How do I remove the outer gutters, an collapse the gutter between column 2 & 3 so that my sidebar and container sit next to each other?

推荐答案

您在查看grid-collapse mixin来解决此问题时是正确的.

You were correct in looking at the grid-collapse mixin to take care of this.

要像您描述的那样制作一个齐平的网格，您的标记应为:

To do a flush grid like the one you described, your markup would be:

.wrapper {
  @include grid-container;
  overflow-x: hidden;
}

.wrapper-inner {
  @include grid-collapse;
}

.sidebar {
  @include grid-column(2 of 12);
}

.container {
  @include grid-column(10 of 12);
}

这篇关于清除Neat 2中的外部排水沟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！