Bootstrap 3 - 页脚中的链接不适用于移动版本

时间：2018-02-02 20:49:07

标签： html css twitter-bootstrap hyperlink footer

我已经彻底搜索了这个问题的答案（特别是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="#">campingbeau-lieu@hotmail.com</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>

感谢您的支持。 ：）

1 个答案:

答案 0 :(得分：1)

尝试以下代码段。我在列中的所有部分添加了行类。

＆＃13;
＆＃13; 
#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
  }
}
＆＃13; 
<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="#">campingbeau-lieu@hotmail.com</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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题