javascript - 某些网页链接无效

Question

您好，我正在使用 Twitter-Bootstrap 框架为客户开发网站，但我遇到了瓶颈，我不知道是什么原因造成的。在继续之前，我将输入我的 html 和 css 代码，然后解释问题。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

body {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

/* TOP OF THE PAGE */
#header {
  float: left;
  width: 100%;
  position: relative;
  z-index: 999;
}

.topbar-section {
  float: left;
  width: 100%;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
}

.top-social {
  float: left;
  width: 100%;
}

.top-social a {
  font-size: 14px;
  color: #777;
  line-height: 50px;
}

.top-social ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.top-social ul li {
  float: left;
  padding: 0;
  width: 50px;
  border-left: 1px solid #ccc;
}

.top-social ul li.last {
  border-right: 1px solid #ccc;
}

.top-social ul li a {
  text-align: center;
  display: block;
  text-decoration: none;
}

.top-social a.email {
  font-weight: 400;
  float: left;
  padding: 0 0 0 20px;
  text-decoration: none;
}

.logo-section {
  float: left;
  width: 100%;
}

strong.logo {
  float: left;
  margin: 0;
  padding: 20px 30px 20px 0;
}

strong.logo a {
  font-size: 18px;
  text-transform: uppercase;
}

.book-section {
  float: right;
  width: 100%;
  padding: 15px 0;
}

.number-box {
  float: left;
  padding: 0 30px 0 0;
}

.number-box span {
  color: #777;
  display: block;
  padding: 0;
}

.number-box strong {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  display: block;
}

div.btn-book-box {
  padding: 10px 0 0;
}

div.btn-book-box a.btn-book {
  padding: 10px 15px;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: #9bc83c;
}

div.btn-book-box a.btn-book:hover {
  background: none;
  border: 1px solid #444;
  color: #222;
}

/*.navigation*/ .navbar {
  border-radius: 0;
}

/*.navigation */.navbar-inverse {
  background-color: transparent;
  border-color: transparent;
}

/*.navigation */.navbar-inverse .navbar-collapse {
  border-color: #ccc;
}

.nav-outer {
  background: #fff;
  border: 1px solid #999;
  float: left;
  width: 100%;
  -moz-box-shadow: 0 0 4px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1);
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

<div id="header">
    <div class="topbar-section">
        <div class="container">
            <div class="col-md-6">
                <div class="top-social">
                    <ul>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li class="last"><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                    </ul>
                    <a href="mailto:" class="email" title="Send us an email">
                        <i class="fa fa-envelope-o"></i> info@prideafricasafaris.com</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="logo-section">
          <div class="container">
            <div class="col-md-6">
                <strong class="logo"><a href="#">Pride Africa Safaris</a>       </strong>
            </div>
            <div class="col-md-6">
                <div class="book-section">
                    <div class="number-box">
                        <div class="number-text">
                            <span>Call us for any Query</span>
                            <strong><i class="fa fa-phone"></i> +256 7** 5** 6**</strong>
                        </div>
                    </div>
                    <div class="btn-book-box">
                        <a href="#" class="btn-book">Book Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="navigation">
        <div class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle"
                            data-toggle="collapse" data-target="#navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="nav-outer">
                    <div id="navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav" id="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Team</a></li>
                            <li><a href="#">Trips</a></li>
                            <li><a href="#">Events</a></li>
                            <li><a href="#">Booking</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Testimonials</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

既然你已经看到了我的代码，问题是当我将 div 包含在类导航中时，top-social 和 logo-section div 中的链接保持静态和非 react 性，但是当我删除 div 时类导航，一切似乎都正常，这里可能是什么问题？提前致谢。

Answer 1

为什么要 float 所有部分？它们现在正漂浮在彼此之上。

从 topbar-section div、top-social div 以及 logo-section 中删除 float 属性 div 和元素将再次可点击。

topbar-section 示例:

.topbar-section {
    float: left; <<-- REMOVE THIS
    width: 100%; <<-- REMOVE THIS TOO
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
}

jsFiddle 链接:https://jsfiddle.net/AndrewL32/d9rpvkpg/3/

---

此外，我注意到您也在您的 fiddle 中的某些其他元素上使用了 float。删除它们并仅保留必要的。

请阅读:https://developer.mozilla.org/en/docs/Web/CSS/float了解 float 的工作原理。