css - 从 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 宽度为 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

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 每边边距来调整行上的负边距以反射(reflect)装订线变化

所以本质上你的 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 像素，请移除媒体断点并将宽度和最大宽度都设置为 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对于混合。

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