Css .nav标签在.navbar品牌分配给其同级元素时行为不正确
我已经在代码的导航部分注释掉了这个bug（带有#个字符），这是我遇到的问题。尝试删除评论中提到的.navbar品牌，您将看到。 我很想知道，当navbar品牌被分配到与其冲突的相邻元素（带有.nav标签的元素）时，引擎盖下发生了什么Css .nav标签在.navbar品牌分配给其同级元素时行为不正确,css,twitter-bootstrap,Css,Twitter Bootstrap,我已经在代码的导航部分注释掉了这个bug（带有#个字符），这是我遇到的问题。尝试删除评论中提到的.navbar品牌，您将看到。 我很想知道，当navbar品牌被分配到与其冲突的相邻元素（带有.nav标签的元素）时，引擎盖下发生了什么 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="author" content="NeelD
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="author" content="NeelDUnstoppable" />
<meta name="description" content="A rough template for html page created just for enhancing and getting a precise grip over the rules" />
<title>html template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="nav" role="navigation">
<!-- ######## Remove the .navbar-brand class from the below <a> element and the .nav-tabs class in <ul> element works completely fine ######### -->
<a href="#" class="navbar-brand">Blasting off with bootstrap</a>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="tickets.html">Tickets</a></li>
<li role="presentation"><a href="#">Stations</a></li>
<li role="presentation"><a href="about.html">About</a></li>
</ul>
</div>
<div class="container">
<div class="row well well-lg">
<div class="col-md-6">
<h2>The Fastest way to space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button type="button" class="btn btn-lg btn-default">Take the Tour</button>
<button type="button" class="btn btn-lg btn-primary">Book Tickets Now</button>
</div>
<div class="col-md-6 hidden-sm hidden-xs">
<img src="images/img-header.jpg" alt="Blasting off" title="Blasting off image"/>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase"></i>
<h3>Book Today</h3>
<p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around teh globe to service everyone</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-random"></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-send"></i>
<h3>RocketBus®</h3>
<p>For cheapest fares, catch the next RocketBus® to the stars. Cheaper on you wallet, and easiest way to make friends</p>
</div>
</div>
</div>
<div class='footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-4 col-md-3 col-xs-6'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='#'>Book your ticket today</a>!</p>
<p><a href='#'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
</div>
<div class='col-sm-2 col-xs-6 col-md-offset-1'>
<h4>Links</h4>
<ul class='list-unstyled'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tickets</a></li>
<li><a href='#'>Stations</a></li>
</ul>
</div>
<div class='clearfix visible-xs'></div>
<div class='col-sm-2 col-xs-6'>
<h4>Stay in Touch</h4>
<ul class='list-unstyled'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
</ul>
</div>
<div class='col-sm-4 col-md-3 col-md-offset-1 col-xs-6'>
<h4>Contact Us</h4>
<ul class='list-unstyled'>
<li><i class='glyphicon glyphicon-globe'></i> Orlando, FL<li>
<li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off<li>
<li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:#'>blastingoff@codeschool.com</a><li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
你的意思是用导航栏导航吗？选项卡不是用于导航的bar@Brian没有人！我希望使用.navbar brand类分配给元素，nav tabs类分配给
- 元素，两个元素都是兄弟元素。我只是想知道为什么，.nav标签组合在一起时行为不正常？不工作，你的意思是它在下面留下空白还是在功能上不工作？@Briane是的，行为不正常，我的意思是它在下面留下空白，下面没有水平线。我忘了添加.css文件，我现在正在添加它。默认情况下，.navbar品牌的高度为50px，这与选项卡高度不匹配，因此是空白。您可以像这样覆盖navbar品牌：
.features .glyphicon {
font-size: 32px;
}
.row {
margin-bottom: 20px;
}
.quote {
background-color: #444;
color: #e1e1e1;
}
.quote blockquote {
border: none;
margin: 0;
}
.quote footer {
color: #c1c1c1;
}
section, header {
background-color: #fff;
}
body {
}
.footer {
padding: 20px 0;
}
/*
#demo-nav {
display: none;
}
.show-nav #demo-nav {
display: block;
}
*/
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 200px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 200px;
}
.footer {
color: #efefef;
background-color: #333;
}
.footer a {
color: #9af7fe;
}
@media only screen and (max-width: 768px) {
body { margin-bottom: 400px; }
.footer { height: 400px; }
}