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。

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

我尝试过的解决方案

我分别尝试从第一列和最后一列向左填充和向右填充，使网格列具有不同的宽度（问题）
尝试使用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对容器和装订线的狭窄效果：

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

编辑：如果需要将容器限制为1280px，请检查以下编辑。
将每侧的默认列填充设置为25px（因此总计50px），而不是初始的30px
通过将每行的默认边距修改为-25px边距来调整行上的负边距以反映装订线变化

因此，基本上您的CSS将是：

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

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

此方法的一个优点是它的响应能力–它没有锁定到任何屏幕尺寸，例如1280px。在jsfiddle snippet或以下的版本中可以看到这一点。前者在调试和测试中增加了一些响应宽度输出，为简洁起见，下面的代码段中省略了该输出。

编辑：如果需要将容器大小限制为1280像素，则可以执行以下操作：

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

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

#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 – mixins的check the Bootstrap documentation完成。

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

从Bootstrap 4网格中删除装订线

1 个答案: