从 Bootstrap 4 中的网格列中删除填充装订线 [英] Removing padding gutter from grid columns in Bootstrap 4

问题描述

如何在 bootstrap 4 中创建无槽网格?

是否有用于删除装订线的官方 API 还是手动的?

解决方案

Bootstrap4:带有开箱即用的 .no-gutters.来源:https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

需要自定义 CSS.

样式表:

.row.no-gutters {右边距:0;左边距:0；&>[class^="col-"],&>[class*=" col-"] {填充右:0;填充左:0;}}

然后使用:

<div class="col-xs-4">...</div><div class="col-xs-4">...</div><div class="col-xs-4">...</div>

它将:

• 从行中删除边距
• 从行正下方的所有列中删除填充

How do you create a gutterless grid in bootstrap 4?

Is there an official API for removing the gutter or is it manual?

解决方案

Bootstrap4: Comes with .no-gutters out of the box. source: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Requires custom CSS.

Stylesheet:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Then to use:

<div class="row no-gutters">
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
</div>

It will:

• Remove margin from the row
• Remove padding from all columns directly beneath the row

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