javascript - 前端bootstrap问题，求大神解答。
本文介绍了javascript - 前端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>
解决方案
这你就要自己写css了。
随便你用浮动啊，块级元素啊，或者flex都行的
这篇关于javascript - 前端bootstrap问题，求大神解答。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
