为什么我写的这个 和老师写的不一样呢？
<!--这是一个导航条--> <!--这是导航的默认样式--> <!--navbar-fixed-top把导航条固定在顶部-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--导航条的内容被container-fluid包裹着-->
<div class="container">
<div class="navbar-header">
<!--界面缩小时出现的图标按钮-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target = "#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--商标或者logo-->
<a class="navbar-brand" href="#">现代浏览器博物馆</a>
</div>
<!--点击图标按钮会弹出包裹着的导航条里的按钮-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--导航条里的一些按钮-->
<ul class="nav navbar-nav">
<li class="active"><a href="">综述</a></li>
<li><a href="">描述</a></li>
<li><a href="">简述</a></li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li class="divider"></li>d
<li><a href="#w">123</a></li>
</ul>
</li>
<li><a href="">关于</a></li>
</ul>
</div>
</div>
</nav>
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 小点点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 輪播的內容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/images/firefox-big.jpg" alt="1 slide">
<div class="carousel-caption" alt="1 slide">
123
</div>
</div>
<div class="item">
<img src="../img/images/firefox-big.jpg" alt="2 slide">
<div class="carousel-caption">
1234
</div>
</div>
<div class="item">
<img src="../img/images/firefox-big.jpg" alt="3 slide">
<div class="carousel-caption">
1235
</div>
</div>
</div>
<!-- 向左向右的按鈕 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container" id="summary-container">
<div class="row">
<div class="col-md-4">
<img src="../img/images/chrome-logo-small.jpg" />
<h2>chrome</h2>
<p>火狐浏览器一个开源网页浏览器</p>
<p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
</div>
<div class="col-md-4">
<img src="../img/images/chrome-logo-small.jpg" />
<h2>chrome</h2>
<p>火狐浏览器一个开源网页浏览器</p>
<p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
</div>
<div class="col-md-4">
<img src="../img/images/chrome-logo-small.jpg" />
<h2>chrome</h2>
<p>火狐浏览器一个开源网页浏览器</p>
<p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
</div>
</div>
<hr>
</div>
CSS样式：
body{
padding-top: 50px;
}
.carousel{
height: 500px;
background-color: #000000;
margin-bottom: 60px;
}
.carousel .item{
height: 500px;
background-color: #000000;
}
.carousel img{
width: 100%;
}
.carousel-caption{
margin-bottom: 20px;
font-size: 20px;
line-height: 1.8;
}
#summary-container .col-md-4{
text-align: center;
}
