Question

您好我正在使用Twitter-Bootstrap框架为客户开发一个网站，但我已经碰壁了，我不知道可能导致它的原因。在我再进一步之前，我将引入我的html和css代码，然后解释问题。

＆＃13;

@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);
}

＆＃13;

<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>

＆＃13;

从现在你已经看到了我的代码，问题是当我在类导航中包含div时，top-social和logo-section div中的链接保持静态和非反应但是当我删除div时类导航，一切似乎都正常工作，这可能是什么问题？在此先感谢。

Answer 1

你为什么漂浮所有部分？他们现在正在互相浮动。

从您的float div，topbar-section div以及top-social div中删除logo-section属性，这些元素将再次被点击。

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/

另外，我注意到你在小提琴中的某些其他元素上使用了float。删除它们并只保留必要的那些。

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

Answer 2

取

float: left;

out of .topbar-section

为什么父元素有浮动：左？

某些网页链接无效

2 个答案: