- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经彻底搜索了这个问题的答案(尤其是 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 类添加到列中的所有部分。
#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="#">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>
关于html - Bootstrap 3 - 页脚中的链接不适用于移动版本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48590678/
无法使用 Hive 版本 1.1.0 HBase 版本 0.94.8 和 hadoop 版本 2.7.0 从 hive 创建 Hbase 表 hive (default)> CREATE TABLE
我试图为 electron app 创建可执行文件但面临这个问题 Unable to determine Electron version. Please specify an Electron ve
我正在尝试让自适应阈值在 python 绑定(bind)到 opencv 中工作(swig 一个 - 无法让 opencv 2.0 工作,因为我正在使用 beagleboard 因为交叉编译还没有工作
我一直在 linux 机器上使用 JMeter,在命令行下使用了一段时间。工作正常。 今天,我在 Windows 机器(新客户端等)上尝试了它,它确实可以工作,但在控制台窗口中输出有很大不同。 Lin
在我的编码环境中,我通常使用最新版本的 Java 和 Eclipse。当我编写源代码时,我不会注意我使用的 API 方法或类是否向后兼容旧版本的 Java 或 Eclipse。在 javadoc 中存
问题是关于版本的特定组合,但更普遍。 我刚刚从 Kubuntu 12.04 升级到 14.04。现在,当我想编译 CUDA 代码(使用 CUDA 6.5)时,我得到: #error -- unsupp
我目前正在对我的一些应用程序进行沙箱处理,看来我必须删除一些功能才能满足 Mac App Store 沙箱(和其他)规则。 显然用户不会因为失去功能而感到高兴,我担心他们不会指责苹果制定了愚蠢的规则,
我用 flash 和 js 版本创建了一个动画横幅。 是否可以检测低于版本 9 的 ie 版本,然后提供 Flash 横幅,否则提供 js 横幅。 最佳答案 您可以使用条件注释来检测 IE 版本
我有一个处理不同位置的数据库的应用程序,我想检查这些数据库是否使用 Firebird 2.5 或更高版本打开。我们最近从 Firebird 2.0 迁移到了 2.5,我们有很多数据库可以响应 sele
我正在开发一个应用程序,我使用托管在我的服务器上的 Java 和 Jersey 构建了后端部分。我在服务器上使用 Tomcat7 来调用 Web 服务。 我以前有一台安装了 Ubuntu 的计算机,我
我可以使用 GetVersionEx() 函数来获取 Windows 版本,但是这个函数将返回一个数字而不是一个字符串。但是没有问题,因为我可以将数字转换为字符串,例如: if (osvi.dwMaj
我已经在我的系统中安装了 Anaconda 2 & 3。 Anaconda 2 包含 python 2.7 & Anaconda 3 包含 python 3.6。 我需要使用命令提示符运行我的 pyt
我正在尝试构建一个 Android 项目,但发生了以下错误 Error:(10, 1) A problem occurred evaluating project ':app'. > Failed t
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
在降级我的 GCC 之前,我想知道是否有办法确定我的机器中的哪些程序/框架或依赖项会中断,以及是否有更好的方法来执行 openpose 安装? (例如,在 CMake 中更改某些内容) 有没有办法在不
我已经在终端的代码sudo apt-get install Shadowsocks-qt5中安装了Shadowsocks-Qt5,然后我可以通过搜索找到启动图标,但是它当我点击图标时打不开。然后我尝试
在网络上找到的文档说,MLLP V2(第 2 版)是用于传输 HL7 版本 3 内容的所有消息传输协议(protocol)的要求。似乎 MLLP 第 2 版主要用于 HL7 第 3 版。 我们可以/应
我正在使用带有 selinium webdriver 的 Protractor 。我的chromeDriver版本是78.0.1,chrome版本是78.0.3904.97。两个版本都匹配,应该不会有
我正在按照教程设置 mysql 数据库并做一些事情。我无法找到数据库资源管理器。我读了很多,但在 Window->show View-> Dataxxx 或右侧上部选项卡中无法正常工作。 最佳答案 从
我已经在 KDE 桌面上安装了 Anaconda 2.0.1。当我运行 python 并看到所有已安装的模块时,我收到此消息“无法将不兼容的 Qt 库(版本 0x40801)与该库(版本 0x4080
我是一名优秀的程序员,十分优秀!