背景颜色不填充行/列的两侧

Question

我在页面上的某个部分添加了一些行和列，现在有一个空白条，其中没有填充背景颜色。我将页面上的所有行都放在一个类为 container-fluid 的 div 中。我尝试将受影响部分侧面的填充（类about）设置为0，侧面没有应用边距（这会阻止它被颜色填充），我尝试了width: 100%--the空白仍然存在。关于问题是什么的任何想法？

完整代码：CodePen（注意：在 CSS 中从正文中移除颜色以查看 CodePen 中的空白区域）

受影响部分的 HTML：

        <section class="about" id="about">
          <div class="row">
            <div class="col">
              <h2>About</h2>
            </div>
          <div class="row">
            <div class="col-md-5">
              <img src="img/circle-portrait-small.png" class="portrait">
            </div>
            <div class="col-md-7">
              <p>..(Removed)..</p>
            </div>
          </div>
        </section>

该部分的 CSS：

.about {
  background-color: WhiteSmoke;
}

.about {
  padding: 3em 0;
}

.about p {
  text-align: left;
}

.about .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

Answer 1

这是因为您构建的网格与引导程序的网格布局约定不一致。您应该将rows 直接放在container-fluid 中。

<div class="container-fluid">
  <section class="row" id="hero">
    <div class="col"></div>
  </section>
  <section class="row" id="about">
    <div class="col"></div>
  </section>
  <section class="row" id="portfolio">
    <div class="col"></div>
  </section>
  <section class="row" id="contact">
    <div class="col"></div>
  </section>
</div>

container-fluid，默认情况下，左右有 15px 填充。

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

row，默认情况下，有-15px 左右边距。

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

如果将所有行直接放在容器流体中，就不会出现这个问题。

检查您的code-pen。我已经解决了这个问题。

---

您不需要使用它。

.about .row {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

Answer 2

Bootstrap 的 .container-fluid 样式正在为此部分添加填充。

你可以像这样覆盖它：

body .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

一个不与容器流体样式混淆的更简单的解决方案是向您的身体添加与您在每个部分中添加的相同的背景颜色，以便不可见间隙：

html body{ background-color: #f5f5f5; }

这是您笔的更新版本

https://codepen.io/suth_a/pen/NzNvdM