为什么我的引导程序重叠？

Question

您好，我只是在制作一个基本模板来帮助我将网站做得更好，我最近才开始使用引导程序，并注意到当我调整浏览器的大小（例如调整为移动设备大小）时，它会在我的页脚？

有人知道为什么会这样吗？

以下是我添加更多文本或调整大小时的一些图像：

就像我说的，我对 bootstrap 还很陌生，而且很可能正在做一些很容易修复的非常愚蠢的事情：)

这是我的 CSS：

html, body { height:100% }

nav {
margin: 0;
padding: 0;
}

div {
display: block;
}

.col-centered {
  float: none;
  margin: 0 auto;
}

.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}

.left {
float: left;
}

.right {
float: right;
}

.container {
      width: 100%;
      margin: 0;
      padding: 0;
      height:100%;
      background:red;
}

.content {
  padding: 5rem 1.5rem;
  text-align: left;
  height:90%; 
  width:75%; 
  margin:0 auto;
  background: green;

}

footer {
background: grey;
height:10%; 
width:75%;
margin:0 auto;
}

这是我的主要 HTML：

<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>

编辑：我忘了包含页脚，如果您认为我需要为您添加此内容，请告诉我。

非常感谢您阅读这篇文章！

编辑 2： 这是我的页脚代码：

<footer>
 <div class="row">
   <div class="col-md-auto">
     <p class="float-right"><a href="#">Back to top</a></p>
     <p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
   </div>
 </div>
</footer>

这是网站的链接： http://81.131.193.35/

Answer 1

去掉.content的高度

.content {
    padding: 5rem 1.5rem;
    text-align: left;
    width: 75%;
    margin: 0 auto;
    background: green;
}

同时移除.container的高度

.container {
    width: 100%;
    margin: 0;
    padding: 0;
    background: red;
}

Answer 2

我会将 footer.php 包装在一对 div 中，并对其应用 row 和 col-md-auto 类。看起来页脚可能带有绝对甚至静态显示的样式。这使页脚无法与其他 div 一起播放

<div class="container">
    <div class="content">
        <div class="row">
            <div class="col-md-auto col-centered">
                <h1>Base Template Title</h1>
                <p>Text would go here...</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-auto">
            <?php include "footer.php" ?>
        </div>
    </div>
</div>