我试图在平板电脑和移动设备视图中将页脚元素堆叠在一起。页脚分为3个部分(联系方式,徽标和版权信息)。我添加的媒体查询没有执行任何操作。当前,这三个部分相互重叠,但看起来像一个楼梯,而不是彼此直接遮挡。
实时预览如下所示:
有人可以告诉我我所缺少的吗?我刚刚开始编码和处理在网上找到的模板。 CSS和HTML代码如下。
.site-footer {
padding: 5em 0;
background: #f2f2f2;
font-size: 13px;
}
.site-footer p:last-child {
margin-bottom: 0;
}
.site-footer a {
color: #f4b214;
}
.site-footer a:hover {
color: #f4b214;
}
.site-footer h3 {
font-size: 15px;
margin-bottom: 20px;
}
.site-footer .footer-link li {
line-height: 1.5;
margin-bottom: 15px;
}
.site-footer hr {
width: 100%;
}
@media only screen and (min-width: 320px) {
.site-footer .container .row .col-sm-12 {
display: block;
float: none;
width: 100%;
}
}
@media only screen and (min-width: 768px) {
.site-footer .container .row .col-md-12 {
display: block;
float: none;
width: 100%;
}
}
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<ul class="list-unstyled footer-link">
<li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue
<br>Suite 202
<br>Lakeland, Florida 33801</span></li>
<li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
<li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday
<br>8:30 AM to 5:30 PM
<br>Meetings by Appointment Only</span></li>
</ul>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="index.html"><img src="img/MR_full_logo.png" style="max-width: 200px" class="center" /></a>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
<p align="right" class="copyright">Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
</div>
</div>
</footer>
答案 0 :(得分:0)
嘿,请尝试以下代码,并检查输出是否可以满足您的要求。使用仅@media屏幕和(最大宽度:768px)在移动设备和标签页视图中获得所需的输出。宽度最大为768是指平板电脑视图。
.site-footer {
padding: 5em 0;
background: #f2f2f2;
font-size: 13px;
}
.site-footer p:last-child {
margin-bottom: 0;
}
.site-footer a {
color: #f4b214;
}
.site-footer a:hover {
color: #f4b214;
}
.site-footer h3 {
font-size: 15px;
margin-bottom: 20px;
}
.site-footer .footer-link li {
line-height: 1.5;
margin-bottom: 15px;
}
.site-footer hr {
width: 100%;
}
@media only screen and (min-width: 320px) {
.site-footer .container .row .col-sm-12 {
display: block;
float: none;
width: 100%;
}
}
@media only screen and (min-width: 768px) {
.site-footer .container .row .col-md-12 {
display: block;
float: none;
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.site-footer{
text-align: center;
}
.site-footer .footer-link li {
list-style: none;
}
.site-footer p:last-child {
text-align: center;
}
}
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<ul class="list-unstyled footer-link">
<li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue
<br>Suite 202
<br>Lakeland, Florida 33801</span></li>
<li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
<li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday
<br>8:30 AM to 5:30 PM
<br>Meetings by Appointment Only</span></li>
</ul>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<a href="index.html"><img src="img/MR_full_logo.png" style="max-width: 200px" class="center" /></a>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
<p align="right" class="copyright">Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
</div>
</div>
</footer>
答案 1 :(得分:0)
这是因为最后一个div中的p标签具有align =“ right”属性,将其在小屏幕上向左浮动或使用text-left,对于图像,您可以将文本向左对齐