我正在使用 Bootstrap 4。对于我的导航，当您单击“菜单”按钮时，会出现一个模式下拉菜单。我正在尝试在模式上创建链接，但由于某种原因，没有链接能够被激活。引导模式属性是否缺少某些内容来触发链接？任何帮助将不胜感激。
a {
color: inherit;
text-decoration: inherit;
}
a:hover {
color: inherit;
text-decoration: inherit;
}
body {
font-family: 'Roboto Condensed', sans-serif;
}
/* ---------------------------------------------------- */
/* navigation */
.navbar-toggler:focus, .navbar-toggler:active {
outline: none;
border: none;
box-shadow: none;
}
.menu {
padding-left: 10px;
}
.fa-bars, .menu {
color: #006699 !important;
}
.navbar-text {
color: gray;
}
.mainlink {
font-size: 1.75em;
line-height: 1.25em;
font-weight: 400;
}
.sublink {
font-size: 1em;
line-height: 1.15em;
}
.navbar-toggle {
margin-left: 15px;
margin-right: 0;
}
.modal-nav-content {
/* width: 100%; */
height: auto;
}
.modal-nav-body {
margin-top: 10em;
}
.modal-nav-body p {
color: white;
margin: 0;
padding: 0;
padding-top: 6px;
padding-bottom: 6px;
/* width: 100%; */
}
.modal-nav-body h5 {
color: white;
line-height: 1.5em;
font-size: 2.75em;
font-weight: 700;
/* padding-left: 2em; */
padding-bottom: 1.5em;
}
.navbar-toggler::before {
border: none;
background: transparent !important;
}
.navbar-text {
display: inline-block;
word-spacing: 2em;
}
.navbar-text a {
color: #808080;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<title>Crossings Realty</title>
</head>
<body>
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="content/crossings-nav.png" alt="Crossings Realty">
</a>
<!-- <span class="navbar-text mr-auto pl-5">
<a href="#">Listings</a>
<a href="#">About</a>
<a href="#">Contact</a>
</span> -->
<span class="navbar-text ml-auto pr-2">
<i class="fas fa-phone fa-xs pr-2"></i><a class="pl-1">000-000-0000</a>
<a class="menu">MENU</a>
</span>
<button class="navbar-toggler collapsed" type="button" data-toggle="modal" data-target="#nav-modal" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars fa-lg"></i>
</button>
</div>
</nav>
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-nav-content">
<div class="modal-nav-body">
<div class="row">
<h5>Explore Crossings Realty.</h5>
</div>
<div class="row">
<div class="col-sm">
<p class="mainlink"><a href="#">HOME</a></p>
<p class="mainlink pt-4"><a href="#">SELLING</a></p>
<p class="mainlink pt-4"><a href="#">LISTINGS</a></p>
<p class="sublink"><a href="#">Buy</a></p>
<p class="sublink"><a href="#">Rent</a></p>
<p class="mainlink pt-4"><a href="#">CONTACT</a></p>
</div>
<div class="col-sm">
<p class="mainlink"><a href="#">ABOUT</a></p>
<p class="sublink"><a href="#">Full Experience</a></p>
<p class="sublink"><a href="#">We Know Real Estate</a></p>
<p class="sublink"><a href="#">Great Agents</a></p>
<p class="mainlink pt-4"><a href="#">RESOURCES</a></p>
<p class="sublink"><a href="#">How we sell fast</a></p>
<p class="sublink"><a href="#">FAQs on buying and selling</a></p>
<p class="sublink"><a href="#">Why use a Realtor?</a></p>
<p class="sublink"><a href="#">We are part of MLS</a></p>
<p class="sublink"><a href="#">Mortgage Calculator</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>最佳答案
Bootstrap 4 模式的“pointer-events”属性默认设置为 none。 要解决此问题，请将以下内容添加到您的 style.css 文件中:
.modal-dialog {
pointer-events: all;
}
然后链接就可以工作了
关于javascript - Bootstrap 模式不允许链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51634961/