Bootstrap 页脚覆盖正文内容
Posted
技术标签:
【中文标题】Bootstrap 页脚覆盖正文内容【英文标题】：Bootstrap Footer covering Body content 【发布时间】：2020-12-24 14:44:18 【问题描述】：在下面的示例代码中，页脚覆盖了正文内容。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
<style>
body
min-height: 100vh;
position: relative;
.footer
position: absolute;
bottom: 0;
left: 0;
right: 0;
</style>
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar text-light">
<a class="navbar-brand" href="http://localhost/project/new_version/"><img src="" title="Website" loading="lazy" /> Website</a>
<ul class="navbar-nav self-first-ul">
Slogan
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto self-second-ul">
<li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/919595951111"><i class="fab fa-whatsapp"></i> 9595951111</a></li>
<li class="nav-item"><a class="nav-link" href="mailto:email@site.com"><i class="far fa-envelope"></i> email@site.com</a></li>
<li class="nav-item"><a class="nav-link" href="tel:9595950000"><i class="fas fa-mobile-alt"></i> 9595950000</a></li>
</ul>
</div>
</span>
</nav>
<div class="container p-3 bg-white rounded">
<div id="carouselExampleIndicators" class="carousel slide carousel-fade d-none d-md-block d-lg-none" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item ">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C6</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C8</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">C5</h5>
<p class="card-text">00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br /><br />
<div class="row">
<label for="Number">Search your transaction here <i class="far fa-hand-point-down far-blink"></i></label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Number" aria-describedby="basic-addon2" id="number" name="srch_num">
<div class="input-group-append">
<input type="submit" class="btn btn-success" id="submit-addon2" value="Search" />
</div>
</div>
</div>
<p><a href="http://localhost/project/new_version/how2search" target="_blank">How to search specific transaction?</a></p>
</div>
<footer class="footer bg-primary">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Company Name</h3>
<p>Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph. Some text to be shown. This will be a paragraph.
Some text to be shown. This will be a paragraph.</p>
</div>
<div class="col-md-3 ml-auto">
<h3>Links</h3>
<ul class="list-unstyled footer-links">
<li><a href="#home-section">Home</a></li>
<li><a href="#category-section">Categories</a></li>
<li><a href="#contact-section">Contact Us</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="tnc.php">Terms & Conditions</a></li>
<li><a href="refund_policy.php">Refund Policy</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>Dial Sales & Support</h3>
<p><i class="fa fa-phone" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_phone.'" title="Dial '.$website_phone.'"> '.$website_phone.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="tel:'.$website_mobile.'" title="Dial '.$website_mobile.'">'.$website_mobile.'</a></p>
<p><i class="fa fa-mobile" aria-hidden="true"></i> <a class="dial_link" href="https://wa.me/91'.$website_wamobile.'" title="Whatsapp '.$website_wamobile.'">'.$website_wamobile.'</a></p>
<p><i class="fa fa-envelope" aria-hidden="true"></i> <strong></strong><a href="mailto:'.$website_email.'"> '.$website_email.'</a></p>
<p><i class="fa fa-calendar-check-o" aria-hidden="true"></i><strong></strong> Monday to Saturday</p>
<p><i class="fa fa-clock-o" aria-hidden="true"></i> <strong></strong> 10am to 6pm</p>
</div>
</div>
<div class="row pt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
Website Slogan
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>我真正想要的是，页脚应该总是在底部。就像如果有长的正文内容（可滚动），那么页脚应该在最后。但如果内容很少，则以一/两行结束，页脚应位于最后。之后就没有空格了。
【问题讨论】：
添加粘性或固定到底部的页脚：0 不，@SandrinJoy 没有解决我的问题。 那么，它显示了什么？ 我已经在页脚中有绝对位置。检查jsfiddle.net/4azxgfb3，将位置设置为粘性。 我已作为答案发布。请查看 【参考方案1】：使用 Flexbox
$("#add").on("click", function()
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
);html, body
/* IE 10-11 didn't like using min-height */
height: 100%;
body
display: flex;
flex-direction: column;
.content
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
.footer
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background:#fe5;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p><button id="add">Add Content</button></p>
</div>
<footer class="footer">
Footer
</footer>【讨论】：
页脚不应该被固定，它应该只显示在最后。 （如果内容很小，之后没有空格） 您的问题不正确。页脚覆盖身体？页脚在正文内 Joy，那我们一步一步来吧。我想要的是页脚总是在最后，但不是固定的。 那么，像***页脚吗？如果是，我已经更新了答案 是的，但不完整。就像这里jsfiddle.net/4azxgfb3/1，页脚在中间的某个地方，但它应该在底部。在这种情况下，页脚下方的空白应位于上方。以上是关于Bootstrap 页脚覆盖正文内容的主要内容，如果未能解决你的问题，请参考以下文章