从 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.

之内

This should give me a column width = 61px as my gutter is going to be 50*11 = 550. So 1280-550/12 = 60.83.

默认情况下，bootstrap 从任一侧离开装订线。

Solutions that I've tried

我尝试分别从第一列和最后一列向左填充和向右填充，使网格列的宽度不同（问题）
尝试利用 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

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

省略使用container或container-fluidclass,as stated in the documentation.

编辑：如果您需要将容器限制为 1280 像素，请检查下面的编辑。
将列的默认填充设置为每边 25px（因此总共 50px），而不是最初的 30px 总
通过将默认值修改为每边的 -25px 边距

所以基本上你的 CSS 将是：

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

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

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

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

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

以上将确保当屏幕宽度为 1280px 或更大时容器保持在最大 1280px，或者当屏幕宽度小于 1280px 时坚持默认的 Bootstrap 响应度。如果您确实希望它始终保持在 1280 像素，请删除媒体断点并将宽度和 max-width 都设置为 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 用于 mixin。

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

从 Bootstrap 4 网格中删除装订线

Remove gutter from Bootstrap 4 grid

css

grid-layout

twitter-bootstrap

bootstrap-4