gpt4 book ai didi

html - 使用 Bootstrap 4 在小型设备上进行页脚布局、响应和隐藏

转载 作者:行者123 更新时间:2023-12-04 03:48:33 25 4
gpt4 key购买 nike

这里是 Bootstrap 4 的新手。我试图让我的页脚符合与以下模型相同的布局:

enter image description here

到目前为止,我最好的尝试如下:

index.html(片段):

<!-- 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/>&nbsp;&nbsp;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>

ma​​in.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;
}

当它在浏览器中运行时,我得到:

enter image description here

正如您所看到的,我有点在那里,但还有很长的路要走。就响应能力而言,我认为如果屏幕很小(移动设备等),我希望页脚(此处的所有内容)完全消失。

任何人都可以发现我的布局/定位哪里出了问题,并帮助我实现我正在寻找的“在小屏幕上消失”功能吗?

最佳答案

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

#myLogo {
width: 360px;
height: 58px;
border: 1px solid red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<hr>
<div class="container-fluid d-none d-sm-block">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<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-6">
<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-12">
<img src="dummy-logo.png" class="img-fluid footer-logo" alt="My logo" id="myLogo">
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3"><a href="" class="">Status</a></div>
<div class="col-sm-3"><a href="" class="">Legal</a></div>
<div class="col-sm-3"><a href="" class="">Privacy</a></div>
<div class="col-sm-3"><a href="" class="">Terms</a></div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<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>

<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/>&nbsp;&nbsp;Testville, XY 12345
</div>
</div>
</div>

为了使您的页脚在某些设备上消失,您需要提及要显示的屏幕的最大和最小尺寸。

@media only screen and (max-width: 767px) and (min-width: 480px) {
.footer{ display: none !important;}
}

关于html - 使用 Bootstrap 4 在小型设备上进行页脚布局、响应和隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64741796/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com