Bootstrap 3 - 页脚中的链接在移动版本上不起作用

Posted 2023-03-21

【中文标题】Bootstrap 3 - 页脚中的链接在移动版本上不起作用

【英文标题】：Bootstrap 3 - Links in footer not working on mobile versions

【发布时间】：2018-07-13 10:14:26

【问题描述】：

我已经彻底搜索过这个问题的答案（特别是 z-index 解决方案，我什至尝试完全更改 div），但似乎没有任何效果。

我使用的是 Bootstrap 3，我的链接仅在页脚中不可点击。链接可以在页面的其余部分单击，但不能在页脚中单击。页脚链接也适用于桌面版，但不适用于移动版，这表明它可能是媒体查询（？）的问题。

这是 CSS 代码和 html 代码的一部分。

#footer 
    background-color: #afb42b;
    height: auto;
    width: 100%;
    color: #fff;
    z-index: 1;


#footer a 
    color: #fff;
     z-index: 1;


/* Custom, iPhone Retina */

@media screen and (min-width: 320px) 
    #footer 
    z-index: 1;


#footer a 
     z-index: 1;



/* Small Devices, Tablets */

@media screen and (min-width: 768px) 
    #footer 
    z-index: 1;


#footer a 
     z-index: 1;



/* Medium Devices, Tablets */

@media screen and (min-width: 1024px) 
    #footer 
    z-index: 1;


#footer a 
     z-index: 1;



/* Large Devices, Wide Screens */

@media screen and (min-width: 1200px) 
    #footer 
        margin-top: 4rem;
        padding-top: 2rem;
        z-index: 1;
    

    #footer h1 
        margin-top: 2rem;
        font-size: 23px;
        z-index: 1;
    

    #footer ul > li 
        position: relative;
        margin-left: -35px;
        z-index: 1;
    

    #footer .contact-info 
        padding-bottom: 1.75rem;
        font-size: 16px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        z-index: 1;
    


    #footer .contact-phone 
        font-size: 20px;
        font-weight: 600;
        z-index: 1;
    

    #footer .copyright 
        font-size: 12px;
        z-index: 1;
        !important margin-top: 2rem;
        !important
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="footer">
    <div class="container">
        <div class="col-lg-4 col0-md- 3 col-sm-12 col-xs-12">
           <h2 class="text-left">Camping</h2>
            <ul>
                <li><a href="photos.php">— Photos</a></li>
                <li><a href="tarifs.php">— Tarifs</a></li>
                <li><a href="tarifs.php#promo">— Promotions</a></li>
            </ul>

           <h2 class="text-left">Services</h2>
            <ul>
                <li><a href="services.php">— Services</a></li>
                <li><a href="services.php#events">— Mariages et événements corporatifs</a></li>
            </ul>
        </div>
        <div class="col-lg-4 col0-md- 3 col-sm-12 col-xs-12">
           <h2 class="text-left">Activités</h2>
            <ul>
                <li><a href="activites.php">— Activités du camping</a></li>
                <li><a href="activites.php#calendar-section">— Calendrier des activités</a></li>
                <li><a href="activites.php#country">— Festival western</a></li>
                <li><a href="activites.php">— Activités à proximité</a></li>
            </ul>

           <h2 class="text-left">Roulottes Prêts-à-Camper</h2>
            <ul>
                <li><a href="roulottes-a-louer.php">— Roulottes Prêts-à-Camper</a></li>
                <li><a href="roulottes-a-louer.php">— Tarifs</a></li>
                <li><a href="roulottes-a-louer.php">— Règlements</a></li>
            </ul>
        </div>
        <div class="col-lg-4 col0-md- 3 col-sm-12 col-xs-12">
           <h2 class="text-left">Contact</h2>

            <ul>
                <li class="contact-info"><a href="#">[e-mail]</a></li>
                <li class="contact-phone"><a href="#">819 864-4731</a></li>
                <li class="contact-info"><a href="services.php#plan">Plan du site</a></li>
                <li class="contact-info"><a href="https://campingbeau-lieu.com/en/">English</a></li>
            </ul>
      <h2 class="text-left">Nous suivre : </h2>     
      <a href="https://www.facebook.com/Camping-Beau-lieu-110223305786148/" target="_blank"><i class="fa fa-3x fa-facebook-official" aria-hidden="true"></i></a>
        </div>

          <div class="col-lg-12 copyright text-center">Camping Beau-Lieu © 2017-<?php echo date('Y');?> | Conception par <a href="https://ignitely.ca">ignitely</a> avec <i class="fa fa-coffee" aria-hidden="true"></i> et <i class="fa fa-heart" aria-hidden="true" style="color:#ff69b4;"></i></div>
    </div>
</section>

感谢您的支持。 :)

【问题讨论】：

row 内 container ... 而这个 col0-md- 3 是什么？

你可以删除你所有的z-index: 1;，没有定位元素它们是无用的

【参考方案1】：

试试下面的 sn-p。我已经为列中的所有部分添加了一个 row 类。

#footer 
  background-color: #afb42b;
  height: auto;
  width: 100%;
  color: #fff;


#footer a 
  color: #fff;



/* Custom, iPhone Retina */

@media screen and (min-width: 320px) 
  #footer 
  #footer a 



/* Small Devices, Tablets */

@media screen and (min-width: 768px) 
  #footer 
  #footer a 



/* Medium Devices, Tablets */

@media screen and (min-width: 1024px) 
  #footer 
  #footer a 



/* Large Devices, Wide Screens */

@media screen and (min-width: 1200px) 
  #footer 
    margin-top: 4rem;
    padding-top: 2rem;
  
  #footer h1 
    margin-top: 2rem;
    font-size: 23px;
  
  #footer ul>li 
    position: relative;
    margin-left: -35px;
  
  #footer .contact-info 
    padding-bottom: 1.75rem;
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  
  #footer .contact-phone 
    font-size: 20px;
    font-weight: 600;
  
  #footer .copyright 
    font-size: 12px;
    !important margin-top: 2rem;
    !important
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<section id="footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-12 col-xs-12">
        <h2 class="text-left">Camping</h2>
        <ul>
          <li><a href="photos.php">— Photos</a></li>
          <li><a href="tarifs.php">— Tarifs</a></li>
          <li><a href="tarifs.php#promo">— Promotions</a></li>
        </ul>

        <h2 class="text-left">Services</h2>
        <ul>
          <li><a href="services.php">— Services</a></li>
          <li><a href="services.php#events">— Mariages et événements corporatifs</a></li>
        </ul>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-4 col-sm-12 col-xs-12">
        <h2 class="text-left">Activités</h2>
        <ul>
          <li><a href="activites.php">— Activités du camping</a></li>
          <li><a href="activites.php#calendar-section">— Calendrier des activités</a></li>
          <li><a href="activites.php#country">— Festival western</a></li>
          <li><a href="activites.php">— Activités à proximité</a></li>
        </ul>

        <h2 class="text-left">Roulottes Prêts-à-Camper</h2>
        <ul>
          <li><a href="roulottes-a-louer.php">— Roulottes Prêts-à-Camper</a></li>
          <li><a href="roulottes-a-louer.php">— Tarifs</a></li>
          <li><a href="roulottes-a-louer.php">— Règlements</a></li>
        </ul>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-4 col-sm-12 col-xs-12">
        <h2 class="text-left">Contact</h2>

        <ul>
          <li class="contact-info"><a href="#">[e-mail]</a></li>
          <li class="contact-phone"><a href="#">819 864-4731</a></li>
          <li class="contact-info"><a href="services.php#plan">Plan du site</a></li>
          <li class="contact-info"><a href="https://campingbeau-lieu.com/en/">English</a></li>
        </ul>
        <h2 class="text-left">Nous suivre : </h2>
        <a href="https://www.facebook.com/Camping-Beau-lieu-110223305786148/" target="_blank"><i class="fa fa-3x fa-facebook-official" aria-hidden="true"></i></a>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 copyright text-center">Camping Beau-Lieu © 2017-
        <?php echo date('Y');?> | Conception par <a href="https://ignitely.ca">ignitely</a> avec <i class="fa fa-coffee" aria-hidden="true"></i> et <i class="fa fa-heart" aria-hidden="true" style="color:#ff69b4;"></i></div>
    </div>
  </div>
</section>

【讨论】：

太好了。没问题。