从 Bootstrap 4 网格中删除装订线

Question

使用 Bootstrap 4，我被要求自定义桌面的默认网格系统，如下所示：

其中，容器&桌面断点为1280px。

我试过的例子是：

   

 body {
  margin-top: 3rem;
}

.l-wrap {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

.grid-item {
  width: calc((100% - 50px * 11) / 12);
  margin-top: 24px;
  margin-right: 50px;
  float: left;
}

/* For a 3-column grid */
.grid-item:nth-child(1n+12) {
  margin-right: 0;
  float: right;
}

/* Demo purposes */
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  text-align: center;
  background: rgba(255, 0, 0, 0.25);
}

<div class="l-wrap">
  <div class="col-grid">
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
  </div>
</div>

这工作得很好。但我试图在 Bootstrap 中实现同样的目标。

gutter width is 50px 但它位于container 之内。

这应该给我一个column width = 61px，因为我的排水沟将是50*11 = 550。所以 1280-550/12 = 60.83。

默认情况下，引导程序从任一侧离开排水沟。

我尝试过的解决方案

1. 我尝试分别从第一列和最后一列向左填充和向右填充，使网格列具有不同的宽度（问题）

2. 尝试使用SCSS mixin 生成列

@include media-breakpoint-up('lg', $breakpoints) {
   @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
         padding-right: 0;
         padding-left: 0;
         @include make-col($i, $columns);
      }
   }
}

因此，我可以从任一侧移除填充，然后在其顶部使用自定义 CSS 来实现此行为，但没有成功

如果有人可以指导如何在 Bootstrap 中实现这一点，请不胜感激？

Answer 1

在 Bootstrap 中使用三个关键更改可以轻松实现来自 Susy 的容器和装订线的窄效果：

1. 使用container 或container-fluid 类省略as stated in the documentation。

   编辑：如果您需要将容器限制为 1280 像素，请检查下面的编辑。

2. 将列的默认内边距设置为每边 25 像素（总共 50 像素），而不是最初的 30 像素

3. 通过将每侧的默认值修改为-25px 边距来调整行上的负边距以反映装订线变化

所以基本上你的 CSS 应该是：

.row {
  margin-left: -25px;
  margin-right: -25px;
}

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

这种方法的一个优点是它的响应能力——它不会锁定到任何屏幕尺寸，例如 1280 像素。这可以在jsfiddle snippet 或以下内容中看到。前者为调试和测试添加了一些响应宽度输出，为简洁起见，在下面的 sn-p 中省略。

编辑：如果您需要将容器大小限制为 1280 像素，您可以这样做：

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding-left: 0;
        padding-right: 0;
    }
}

以上将确保容器在屏幕宽度为 1280px 或更大时保持在最大 1280px，或者在屏幕宽度小于或等于 1280px 时保持默认的 Bootstrap 响应能力。如果您确实希望它始终为 1280 像素，请删除媒体断点并将宽度和最大宽度都设置为 1280 像素。

#example-row {
  background: #0074D9;
  margin-top: 20px;
}

.example-content {
  display: flex;
  height: 80px;
  background-color: #FFDC00;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.row {
  margin-left: -25px;
  margin-right: -25px;
}

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding-left: 0;
    padding-right: 0;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container" id="example-container">
  <div class="row" id="example-row">
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
  </div>
</div>

所有这些也可以在源代码中使用 SASS 完成 - check the Bootstrap documentation 用于 mixins。

最后，如果您确实需要将这些更改为仅针对某些特殊内容的默认大小，请将上面的类更改为新名称（例如 .container-1280）并相应地修改 HTML。