问页脚链接在移动视图上消失
EN

Stack Overflow用户

提问于 2019-11-14 15:33:26

回答 1查看 76关注 0票数 1

我有一个我的网页页脚，它是要求在左边的标志和右边的链接，我设法做到这一点，它看起来很好在桌面上，但当我切换到响应式设计模式，它得到完全混乱从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
                    info@info.com
                    <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>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-14 16:05:46

尝尝这个

.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
        info@info.com
        <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>