页脚链接在移动视图中消失

Question

我的网页有一个页脚，要求徽标在左边，链接在右边，我设法做到了，它在桌面上看起来很好，但当我切换到响应式设计模式时，它从990px变得完全混乱，甚至更低，在某个时候(比如350px(，链接完全消失了。我该怎么解决这个问题？

.page-footer {
background-color: #000030;
font-size: 14px;
}
.list-footer {
color: white;
}
.footer-copyright {
margin-top: -3%;
margin-bottom: -3%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" defer></script>
<script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Footer -->
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<div class="float-left">
<img src="https://picsum.photos/id/237/536/354" alt="LOGO" style="width:200px;height:100px;">
<br><br>
<!-- Copyright -->
<div class="footer-copyright text-center py-3" style="color:white">0800-123456
[e-mail]
<p>New York</p>
</div>
</div>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">ABOUT</h5>
<ul class="list-unstyled text-center">
<li>
<a href="/about" class="list-footer">Link 1</a>
</li>
<li>
<a href="/team" class="list-footer">TEAM</a>
</li>
<li>
<a href="/faq" class="list-footer">FAQ</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">LINK4</h5>
<ul class="list-unstyled text-center">
<li>
<a href="/mutual" class="list-footer">TITLE2</a>
</li>
<li>
<a href="#!" class="list-footer">LINK 2</a>
</li>
<li>
<a href="#!" class="list-footer">LINK3</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">Services</h5>
<ul class="list-unstyled text-center">
<li>
<a href="#!" class="list-footer">LINK6</a>
</li>
<li>
<a href="#!" class="list-footer">LINK5</a>
</li>
<li>
<a href="#!" class="list-footer">link8</a>
</li>
<li>
<a href="#!" class="list-footer">link9</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">REPORTS</h5>
<ul class="list-unstyled text-center">
<li>
<a href="#!" class="list-footer">3months</a>
</li>
<li>
<a href="#!" class="list-footer">6months</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<div class="container">
<div class="text-center py-3" style="color:white">
<div class="text-justify">
<small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Idemque diviserunt naturam hominis in animum et corpus.</i> Duo Reges: constructio interrete. <b>Immo alio genere;</b> Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. <a href="http://loripsum.net/" target="_blank">Quare conare, quaeso.</a> Nam memini etiam quae nolo, oblivisci non possum quae volo. <b>Venit ad extremum;</b> Si ad corpus pertinentibus, rationes tuas te video compensare cum istis doloribus, non memoriam corpore perceptarum voluptatum; </p>
<p>Est autem officium, quod ita factum est, ut eius facti probabilis ratio reddi possit. Videsne igitur Zenonem tuum cum Aristone verbis concinere, re dissidere, cum Aristotele et illis re consentire, verbis discrepare? Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. <b>Utilitatis causa amicitia est quaesita.</b> At cum tuis cum disseras, multa sunt audienda etiam de obscenis voluptatibus, de quibus ab Epicuro saepissime dicitur. Sed ut proprius ad ea, Cato, accedam, quae a te dicta sunt, pressius agamus eaque, quae modo dixisti, cum iis conferamus, quae tuis antepono. </p>
<p>Traditur, inquit, ab Epicuro ratio neglegendi doloris. <b>Ut aliquid scire se gaudeant?</b> <a href="http://loripsum.net/" target="_blank">De hominibus dici non necesse est.</a> Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? <b>Dat enim intervalla et relaxat.</b> <a href="http://loripsum.net/" target="_blank">Si quae forte-possumus.</a> </p>
<br><br><br>
</small>
</div>
</div>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<a href=# class=scroll-to-top><i class="fa fa-angle-up" aria-hidden=true></i></a>

Answer 1

试试这个

.page-footer {
background-color: #000030;
font-size: 14px;
}
.list-footer {
color: white;
}
.footer-copyright {
margin-top: -3%;
margin-bottom: -3%;
}
@media screen and (max-width: 1200px) {
footer h5, footer ul li a {
font-size: 16px;
}
footer .row{
flex-wrap: unset;
}

} 
@media screen and (max-width: 780px) {
footer h5, footer ul li a {
font-size: 14px;
}
footer .row{
flex-wrap: unset;
}
footer .float-left {
float: none!important;
} 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" defer></script>
<script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Footer -->
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<div class="float-left">
<img src="https://picsum.photos/id/237/536/354" alt="LOGO" style="width:200px;height:100px;">
<br><br>
<!-- Copyright -->
<div class="footer-copyright text-center py-3" style="color:white">0800-123456
[e-mail]
<p>New York</p>
</div>
</div>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">ABOUT</h5>
<ul class="list-unstyled text-center">
<li>
<a href="/about" class="list-footer">Link 1</a>
</li>
<li>
<a href="/team" class="list-footer">TEAM</a>
</li>
<li>
<a href="/faq" class="list-footer">FAQ</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">LINK4</h5>
<ul class="list-unstyled text-center">
<li>
<a href="/mutual" class="list-footer">TITLE2</a>
</li>
<li>
<a href="#!" class="list-footer">LINK 2</a>
</li>
<li>
<a href="#!" class="list-footer">LINK3</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">Services</h5>
<ul class="list-unstyled text-center">
<li>
<a href="#!" class="list-footer">LINK6</a>
</li>
<li>
<a href="#!" class="list-footer">LINK5</a>
</li>
<li>
<a href="#!" class="list-footer">link8</a>
</li>
<li>
<a href="#!" class="list-footer">link9</a>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4 text-center title-mine list-footer">REPORTS</h5>
<ul class="list-unstyled text-center">
<li>
<a href="#!" class="list-footer">3months</a>
</li>
<li>
<a href="#!" class="list-footer">6months</a>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<div class="container">
<div class="text-center py-3" style="color:white">
<div class="text-justify">
<small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Idemque diviserunt naturam hominis in animum et corpus.</i> Duo Reges: constructio interrete. <b>Immo alio genere;</b> Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. <a href="http://loripsum.net/" target="_blank">Quare conare, quaeso.</a> Nam memini etiam quae nolo, oblivisci non possum quae volo. <b>Venit ad extremum;</b> Si ad corpus pertinentibus, rationes tuas te video compensare cum istis doloribus, non memoriam corpore perceptarum voluptatum; </p>
<p>Est autem officium, quod ita factum est, ut eius facti probabilis ratio reddi possit. Videsne igitur Zenonem tuum cum Aristone verbis concinere, re dissidere, cum Aristotele et illis re consentire, verbis discrepare? Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. <b>Utilitatis causa amicitia est quaesita.</b> At cum tuis cum disseras, multa sunt audienda etiam de obscenis voluptatibus, de quibus ab Epicuro saepissime dicitur. Sed ut proprius ad ea, Cato, accedam, quae a te dicta sunt, pressius agamus eaque, quae modo dixisti, cum iis conferamus, quae tuis antepono. </p>
<p>Traditur, inquit, ab Epicuro ratio neglegendi doloris. <b>Ut aliquid scire se gaudeant?</b> <a href="http://loripsum.net/" target="_blank">De hominibus dici non necesse est.</a> Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? <b>Dat enim intervalla et relaxat.</b> <a href="http://loripsum.net/" target="_blank">Si quae forte-possumus.</a> </p>
<br><br><br>
</small>
</div>
</div>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<a href=# class=scroll-to-top><i class="fa fa-angle-up" aria-hidden=true></i></a>