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

我会将footer.php包装在一对div中，并将一行和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>

Answer 2

删除.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;
}

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

2 个答案: