前端bootstrap问题，求大神解答
自己在仿照滴滴打车的官网开发，滴滴官网是响应式网站的，移动端的样子如图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="#">企业版</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> <li><a href="#">联系我们</a></li> <li><a href="#">商业中心</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>
erutdioup8556浏览 4424回答 6
6回答
-
微积分2016
bootstrap不是有这个导航吗， 用这个类 "navbar-justified" 响应式的 -
微积分2016
bootstrap不是有这个导航吗， 用这个类 "navbar-justified" 响应式的 -
echo_kinchao
ul 给宽度 li给左浮动 -
懒人一只
修改navbar-nav这个类下面的li标签和a标签应该可以做到一排。从技术上来说就是给li一个宽度，并且让它成为一个行内块级元素。 -
荼酒
<ul class='list-inline'> <li></li> <li></li> <li></li> </ul>
随时随地看视频慕课网APP
Bootstrap
Html/CSS
Html5