html - 为什么我的引导重叠？

Question

你好，我只是在制作一个基本模板来帮助我把网站做得更好，我最近才开始使用 Bootstrap ，并且注意到当我调整浏览器大小时(例如调整到移动设备大小)，它会重叠在我的页脚？

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

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

就像我说的那样，我对 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;
}