Question

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

完整代码：CodePen（注意：在CSS中删除body中的颜色以查看CodePen中的空格）

受影响部分的HTML：

width: 100%

该部分的CSS：

        <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>

Answer 1

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

您可以这样覆盖它：

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

一个简单的解决方案，它不会破坏容器流体样式，只是为你在每个部分添加的身体添加相同的背景颜色，这样就不会看到间隙：

html body{ background-color: #f5f5f5; }

这是笔的更新版本

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

Answer 2

这是因为您构建的网格与引导程序的网格布局约定不一致。您应该将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%;
}

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

2 个答案: