从Bootstrap 4网格中删除装订线 [英] Remove gutter from Bootstrap 4 grid

问题描述

在使用Bootstrap 4时，系统要求我为桌面自定义默认网格系统，如下所示:

With Bootstrap 4, I have been asked to customise the default grid system for desktop like this:

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

wherein, the container & desktop breakpoint is 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中实现相同的目标.

This works perfectly fine. But I am trying to achieve same in Bootstrap.

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

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

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

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

By default, bootstrap leaves the gutter from either side.

我尝试过的解决方案

Solutions that I've tried

1. 我尝试向左填充&am​​p;从1st&最后一列，使网格列具有不同的宽度( Problem )

尝试使用SCSS mixin生成列

Tried utilizing SCSS mixin to generate column

@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来实现此行为，但没有成功

So that, I can remove the padding from either side and then have a custom CSS on top of it to achieve this behaviour but no success

请问是否有人可以引导如何在Bootstrap中实现这一目标?

Appreciate if anyone can guide on how to achieve this in Bootstrap, please?

推荐答案

使用以下三个主要更改，可以轻松地在Bootstrap中轻松实现Susy的容器和装订线的狭窄效果:

The narrow effects for container and gutter from Susy can be achieved easily in Bootstrap using three key changes:

1. 使用container或container-fluid类，省略如文档中所述.

如果需要将容器限制为1280px，请检查以下编辑.

If you need to restrict the container to 1280px, check the edit below.

将每侧的默认列填充设置为25px(共计50px)，而不是最初的30px

Set default padding of columns to 25px on each side (so 50px total), instead of the initial 30px total

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

Adjust the negative margin on the row to reflect the gutter change by modifying the default to -25px margin on each side

因此，您的CSS本质上将是:

So essentially your CSS would be:

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

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

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

One advantage of this approach is its responsiveness – it is not locked to any screen size such as 1280px. This can be seen in action in this jsfiddle snippet or below. Have added some responsive width output for debugging and testing in the former, omitted in the snippet below for brevity.

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

If you need to have the container size restricted to 1280px, you could do:

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

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

The above will ensure that the container stays at maximum 1280px when the screen is 1280px in width or more, or stick to the default Bootstrap responsiveness when it is less. If you do prefer to have it always at 1280px, remove the media breakpoint and set both width and max-width to 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来完成– 选中混合文件的Bootstrap文档.

All of this can also be done in the source code with SASS – check the Bootstrap documentation for the mixins.

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

Lastly, if you do need to have these changes to default sizes only for some special content, change the classes above to a new name (e.g. .container-1280) and amend the HTML accordingly.

这篇关于从Bootstrap 4网格中删除装订线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！