容器背景比平时长

Question

所以我创建了一个绿色背景的页脚，并在容器内添加了绿色背景，如图所示。但不知何故，果岭的长度比其他容器长。

代码在这里

HTML CSS

Answer 1

查看你的html代码，似乎你正在使用twitter bootstrap框架。

如果要使用列结构，则应遵循bootstrap

设置的标记标准

HTML结构

<div class="container">
  <div class="row">
    <div class="col-md-3">
      HTML code 
    </div>
  </div>
<div>

不要忘记按照标准设置层次结构。

查看文档以获取更多详细信息https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

我建议您将 green 类置于 container 内，而不是 container 。检查下面的代码片段，你会看到差异。

.green {
  background: green;
}

.container {
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="green">
    <div class="row">
      <div class="col-xs-3">3</div>
      <div class="col-xs-4">4</div>
      <div class="col-xs-5">5</div>
    </div>
  </div>
</div>

我希望这会有所帮助。