【发布时间】：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="#">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>感谢您的支持。 :)
【问题讨论】：
-
row内container... 而这个col0-md- 3是什么？ -
你可以删除你所有的
z-index: 1;，没有定位元素它们是无用的
标签： html css twitter-bootstrap hyperlink footer