Bourbon Neat自定义容器尺寸：如何实现无gutter的970px容器？

Hey there! Let's tackle this Bourbon Neat layout issue you're facing—those default gutters can definitely throw off your exact width goals. Here are a few solid, actionable solutions to get that 970px container without any side gutters:

方案1：全局覆盖默认Gutter值 #

If you don't need the 15px gutter anywhere else in your project (or at least in the context of this container), you can redefine Neat's core gutter variable before importing Neat. This will change the default gutter for all your layouts:

// Set this variable FIRST, before importing Bourbon/Neat
$gutter-width: 0;

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

.your-fixed-container {
  @include container(970px);
}

This will generate a container that's strictly 970px wide, with no extra padding or gutters eating into the width.

方案2：Disable Gutters for a Single Container #

If you want to keep the default 15px gutter for other layouts but only remove it for this specific container, use one of these targeted approaches:

Method A: Use Neat's Built-in no-gutters() Mixin #

Neat includes a dedicated mixin to strip gutters from any element. Just apply it right after the container mixin:

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

.your-fixed-container {
  @include container(970px);
  @include no-gutters();
}

This mixin automatically adjusts padding and margin to eliminate the gutter space, ensuring your container hits the exact 970px mark.

Method B: Manually Override Padding #

If you run into version-specific issues with no-gutters(), you can directly remove the default left/right padding that Neat adds to containers (which equals the gutter width):

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

.your-fixed-container {
  @include container(970px);
  padding-left: 0;
  padding-right: 0;
}

Since Neat's default container subtracts the gutter width via padding, removing that padding restores your full 970px width.

方案3：Create a Reusable No-Gutter Container Mixin #

If you'll need this kind of container multiple times, wrap the logic into a custom mixin for easy reuse:

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

@mixin container-no-gutters($width) {
  @include container($width);
  @include no-gutters();
}

// Usage example
.your-fixed-container {
  @include container-no-gutters(970px);
}

All these methods work with most recent versions of Bourbon Neat (2.x and above). If you're on an older version, double-check the mixin names—some legacy versions use slightly different syntax, but the core idea of removing gutter padding/margin remains the same.

内容的提问来源于stack exchange，提问作者smrtrnx