?自己在仿照滴滴打車的官網(wǎng)開發(fā)，滴滴官網(wǎng)是響應式網(wǎng)站的，移動端的樣子如圖2，但是我自己做的跟官方的導航菜單不一樣，我的是豎立的，怎么可以變成橫向水平？？？?<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<meta?name="viewport"?content="width=device-width,initial-scale=1,user-scalable=no">
<title>滴滴一下，讓出行更美好</title>
<link?type="image/x-icon"?href="img/huadiLogo.ico"?rel="icon">
????<link?rel="stylesheet"?href="css/huadi_didi.css"?/>
????<link?rel="stylesheet"?href="bootstrap/css/bootstrap.min.css"?/>
</head>
<body>
<!--?導航欄navbar?-->
<nav?class="navbar?navbar-default?navbar-fixed-top">
<div?class="container">
<div?class="navbar-header">
<a?href="#"?class="navbar-brand"?style="padding:0;"><img?src="img/icon02.png"?alt="滴滴logo"></a>
<button?type="button"?class="navbar-toggle"?data-toggle="collapse"?data-target="#navbar-collapse">
<span?class="icon-bar"></span>
<span?class="icon-bar"></span>
<span?class="icon-bar"></span>
</button>
</div>
<!--導航欄菜單-->
<div?class="collapse?navbar-collapse"?id="navbar-collapse">
<ul?class="nav?navbar-nav?navbar-right"?style="margin-top:0">
<li><a?href="#">首頁</a></li>
<li><a?href="#">順風車</a></li>
<li?role="presentation"?class="dropdown">
<a?class="dropdown-toggle"?data-toggle="dropdown"?href="#"?role="button"?aria-haspopup="true"?aria-expanded="false">
????? ?出租車<span?class="caret"></span>
???? </a>
<ul?class="dropdown-menu">
<li?><a?href="#">乘車端</a></li>
<li><a?href="#">司機端</a></li>
</ul>
</li>
<li><a?href="#">快車</a></li>
<li><a?href="#">代駕</a></li>
<li><a?href="#">企業(yè)版</a></li>
<li?role="presentation"?class="dropdown">
<a?class="dropdown-toggle"?data-toggle="dropdown"?href="#"?role="button"?aria-haspopup="true"?aria-expanded="false">
????? ?關(guān)于小桔<span?class="caret"></span>
???? </a>
<ul?class="dropdown-menu">
<li><a?href="#">關(guān)于我們</a></li>
<li><a?href="#">加入我們</a></li>
<li><a?href="#">聯(lián)系我們</a></li>
<li><a?href="#">商業(yè)中心</a></li>
<li><a?href="#">社會責任</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--輪播-->
<div?id="myCarousel"?class="carousel?slide">
?? <!--?輪播（Carousel）指標?-->
????<ol?class="carousel-indicators">
??????<li?data-target="#myCarousel"?data-slide-to="0"?class="active"></li>
??????<li?data-target="#myCarousel"?data-slide-to="1"></li>
??????<li?data-target="#myCarousel"?data-slide-to="2"></li>
??????<li?data-target="#myCarousel"?data-slide-to="3"></li>
????</ol>???
??? <!--?輪播（Carousel）項目?-->
????<div?class="carousel-inner">
?????<div?class="item?active">
<img?src="img/banner01.jpg"?alt="First?slide">
</div>
<div?class="item">
<img?src="img/banner02.jpg"?alt="Second?slide">
</div>
<div?class="item">
<img?src="img/banner03.jpg"?alt="Third?slide">
</div>
<div?class="item">
<img?src="img/banner04.jpg"?alt="Third?slide">
</div>
?? </div>
???
????<!--?輪播（Carousel）導航?-->
??? <!--<a?href="#myCarousel"?data-slide="prev"?class="carousel-control?left">‹</a>
<a?href="#myCarousel"?data-slide="next"?class="carousel-control?right">›</a> -->
????</div>
???
?
??? <!--響應式圖片-->
??? <div?class="container-fluid">
????<div?class="row">
???? <div?class="col-md-3?col-sm-6">
???? <a?href="#"><img?src="img/index-1.png"?class="img-responsive?img-thumbnail"/></a>
???? </div>
???? <div?class="col-md-3?col-sm-6?">
???? <a?href="#"><img?src="img/index-2.png"?class="img-responsive?img-thumbnail"/></a>
???? </div>
???? <div?class="col-md-3??col-sm-6">
???? <a?href="#"><img?src="img/index-3.png"?class="img-responsive?img-thumbnail"/></a>
???? </div>
???? <div?class="col-md-3?col-sm-6?">
???? <a?href="#"><img?src="img/index-4.png"?class="img-responsive?img-thumbnail"/></a>
???? </div>
????</div>
????</div>
????
???? <!--底部-->
????<div?class="foot">
???? <p>?2014?北京小桔科技有限公司</p>
????</div>
????
</body>
<script?type="text/javascript"?src="bootstrap/js/jquery.min.js"></script>
??? <script?type="text/javascript"?src="bootstrap/js/bootstrap.js"?></script>
<script?type="text/javascript"?src="js/respond.js"?></script>
<script?type="text/javascript"?src="js/huadi_index.js"?></script>
</html>
前端bootstrap問題，求大神解答
erutdioup8556
2016-06-12 16:59:18
