Question

对于我的工作，我必须为现有的Wordpress网站创建一个自定义主页。由于我的老板喜欢我的页脚，因此我必须在所使用的主题中实现自己的页脚。

我的页脚运行正常，但在移动版本中，我无法单击链接...

这是网站：website

有人有想法吗？

<div class="container">
    <div class="col-xs-12 col-sm-6 col-md-3  text-left footer-column">
        <h3>EB Quad</h3>
        <ul>
            <li><a href="https://www.ebquad.be/">Accueil</a></li>
            <li><a href="https://www.ebquad.be/atelier/">Atelier</a></li>
            <li><a href="https://www.ebquad.be/occasions/">Occasions</a></li>
            <li><a href="https://www.ebquad.be/contact/">Contact</a></li>
            <li><a href="https://www.ebquad.be/livre-dor/">Livre d'or</a></li>
        </ul>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3  text-left footer-column">
        <h3>CF Moto</h3>
        <ul>
            <li><a href="https://www.ebquad.be/quads/">Quads</a></li>
            <li><a href="https://www.ebquad.be/buggys/">Buggys</a></li>

        </ul>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3  text-right footer-column">
        <h3>Randonnées</h3>
        <ul>
            <a href="https://www.ebquad.be/randonnees/">
                <li>Nos randonnées</li>
            </a>
            <li><a href="https://www.ebquad.be/agenda/">Agenda</a></li>
            <li><a href="https://www.ebquad.be/photos/rando-2018">Photos</a></li>
            <li><a href="https://www.ebquad.be/tarifs-informations/">Informations/Tarifs</a></li>

        </ul>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3  text-right footer-column">
        <h3>Informations</h3>
        <ul>
            <li><a href="https://www.google.com/maps/place/E.b.+Renove/@50.3840829,4.0316377,15z/data=!4m2!3m1!1s0x0:0xe36a2bfccc6eb3da?ved=2ahUKEwj5r93ciZjfAhVQNOwKHfAYCtQQ_BIwDXoECAYQCA" target="_blank" rel="noopener noreferrer">
                    Route de Beaumont 10<br>
                    7041 Givry (Mons)</a></li>
            <li><a href="mailto:info@eri-renove.be">info@eri-renove.be</a></li>
            <li><a href="tel:0495447304">0495/447.304</a></li>

        </ul>
    </div>

    <!-- .footer-widget-wrap -->
    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
        <div style="font-size:12px; margin:auto; text-align:center;">Site réalisé par:</div>
        <a  href="http://www.mds-digitalagency.be" class="watermark-link" target="_blank"><img src="https://www.ebquad.be/wp-content/uploads/2018/12/mds_logo.png"
             style="width: 64px; margin-bottom:30px;" alt=""></a>
    </div>
    <div class="footer-bottom-wrap col-md-12">
        EB QUAD © Tous droits réservés | <a href="http://www.ebquad.be/conditions-generales/">Conditions générales</a>

    </div><!-- .footer-bottom-wrap -->




</div><!-- container -->

谢谢

Answer 1

您的.footer-bottom-wrap覆盖了整个页脚。将display: inline-block添加到此元素，一切正常。

Answer 2

由于链接是float元素，因此不会显示为正常流，并且.foote-bottom-wrap elemnt不是float元素，因此这是覆盖所有链接的原因..您可以修复它使用此类。

.footer-bottom-wrap {
  ...
  overflow:hidden;
}

此属性可解决此问题。.您可以找到一个很好的教程来理解浮动行为here

Answer 3

将此CSS添加到样式表中

.footer-bottom-wrap {float: left;}

Answer 4

在您的style.css行号380“ overflow：hidden;”中添加此

Answer 5

这是由您的CSS代码引起的，只需尝试添加通过HTML

<div class="clearfix"></div>
<!--before-->
<div class="footer-bottom-wrap col-md-12">

或通过CSS

.footer-bottom-wrap {
    color: #787977;
    overflow: hidden;
}

无法在移动版本上点击页脚链接

5 个答案: