【发布时间】：2021-02-20 18:59:27
【问题描述】：
这里是 Bootstrap 4 的新手。我试图让我的页脚符合与以下模型相同的布局：
到目前为止，我的最佳尝试如下：
index.html (sn-p)：
<!-- footer -->
<hr/>
<div class="container-fluid">
<div class="row">
<div class="col-sm">
<span class="linklist-label">Foobar</span>
<ul class="linklist">
<li><a class="footer-link" href="">Fizz</a></li>
<li><a class="footer-link" href="">Buzz</a></li>
<li><a class="footer-link" href="">Foobar</a></li>
</ul>
</div>
<div class="col-sm">
<span class="linklist-label">Other Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Cool Links</a></li>
<li><a class="footer-link" href="">What's New</a></li>
<li><a class="footer-link" href="">Newsletter</a></li>
</ul>
</div>
<div class="col-sm">
<span class="linklist-label">Zoo Stuff</span>
<ul class="linklist">
<li><a class="footer-link" href="">Zebras</a></li>
<li><a class="footer-link" href="">Rhinos</a></li>
<li><a class="footer-link" href="">Monkeys</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-6">
<img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo">
</div>
<div class="col-sm">
<span class="linklist-label">Contact Us</span>
<br/><span class="fas fa-phone" aria-hidden="true"></span> 800.555.5555
<br/><span class="fas fa-envelope" aria-hidden="true"></span> <a href="mailto:info@example.com">info@example.com</a>
<br/><span class="fas fa-map-marker-alt" aria-hidden="true"></span> 123 Testville Rd
<br/> Testville, XY 12345
</div>
</div>
</div>
<div class="row">
<div class="col-sm"><a href="" class="">Status</a></div>
<div class="col-sm"><a href="" class="">Legal</a></div>
<div class="col-sm"><a href="" class="">Privacy</a></div>
<div class="col-sm"><a href="" class="">Terms</a></div>
</div>
main.css：
html, body {
height: 100%;
font-family: 'Lato';
}
.bordered {
border-radius: 5px;
border: 1px solid white;
}
.navbar {
background-color: #00142E;
}
#navb ul {
align-items: center;
}
.red-button {
border-radius: 5px;
border: 1px solid #A81E30;
background-color: #A81E30;
color: beige;
}
.mainlogo {
height: 50px;
}
.footer-logo {
height: 100px;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.linklist {
list-style-type: none;
padding-left: 0;
}
.linklist-label {
font-weight: bolder;
color: #A81E30;
}
.linklist a.footer-link {
color: #00142E;
}
.linklist a.footer-link:hover {
color: gray;
}
当它在浏览器中运行时，我得到：
正如你所看到的，我有点在那里，但还有很长的路要走。就响应能力而言，我认为如果屏幕很小（移动设备等），我希望页脚（这里的所有内容）完全消失。
谁能发现我的布局/定位出错的地方，并帮助我实现我正在寻找的“在小屏幕上消失”功能？
【问题讨论】：
-
您希望页脚消失的屏幕尺寸是多少？ 320px、380px、414px、575px 或 767px 还是什么？
标签： html css bootstrap-4 responsive-design