我有使用Bootstrap创建的导航。它在PC和平板电脑上运行良好。但在移动设备中它的负载是自己的下拉。
当前移动视图
我需要像普通视图一样。 （检查评论我不能添加2个以上的链接）
代码已添加到https://jsfiddle.net/sqzbqh4h/2/
<section id="header">
<header class="">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="top-line bottom_header">
<div class="clear_fix">
<div class="col-sm-2 col-sm-offset-1">
<div class="logo">
<a href="index.php">
<img src="./assets/images/logo2.png" class="img-logo">
</a>
</div>
</div>
<div style="clear: right"></div>
<div class="row col-sm-8 no-pad-left">
<div class="top-info">
<div class="social-top">
<ul class="nav navbar-nav" id="nav-sub">
<li><a href="">branch network</a></li>
<li><a href="">downloads</a></li>
<li><a href="">corporate info</a></li>
<li><a href="">careers</a></li>
<li><a href="">csr</a></li>
<li><a style="color: #f58220 !important;" href="">Login</a></li>
</ul>
<ul class="ul-language">
<li class="dropdown hidden-xs hidden-sm">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
English <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">English</a></li>
<li><a href="#">Sinhala</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="col-sm-10 col-sm-offset-1 no-pad-right-md bottom-info">
<div class="right-info" style=" margin-top: 8px;">
<div class="col-sm-4 middle-nav-item no-pad-both">
<div class="col-sm-12 no-pad-both">
<div class="col-sm-1 middle-nav-icon middle-nav-icon-first ">
<i class="fa fa-map-marker"></i>
</div>
<div class="col-sm-10 no-pad-right no-pad-right-md">
<p>
<span class="middle-nav-header">Company Insurance Limited</span>
<br>
<span class="middle-nav-text" > Brisbain</span>
</p>
</div>
</div>
</div>
<div class="col-sm-4 middle-nav-item no-pad-both">
<div class="col-sm-12 no-pad-both">
<div class="col-sm-1 middle-nav-icon">
<i class="fa fa-clock-o"></i>
</div>
<div class="col-sm-10 no-pad-right-md">
<p>
<span class="middle-nav-header">Mon - Sat 9:00 - 18:00</span>
<br>
<span class="middle-nav-text">Sunday CLOSED</span>
</p>
</div>
</div>
</div>
<div class="col-sm-3 middle-nav-item no-pad-both">
<div class="col-sm-12 no-pad-both">
<div class="col-sm-1 middle-nav-icon">
<i class="fa fa-phone"></i>
</div>
<div class="col-sm-10 no-pad-right-md">
<p>
<span class="middle-nav-header">011 257 4721</span>
<br>
<span class="middle-nav-text">Free Call</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="mainmenu-area">
<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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-sm-12 collapse navbar-collapse nav-div" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav-main">
<li>
<a class="active" href="index.php">Home</a>
</li>
<li class="dropdown main-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
About
</a>
<ul class="dropdown-menu main-dropdown-menu">
<li><a href="#">Our Company</a></li>
<li><a href="#">Our Vision</a></li>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Our Team</a></li>
</ul>
</li>
<li>
<a href="">Our Services</a>
</li>
<li>
<a href="">Gallery</a>
</li>
<li>
<a href="">Blog</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</section>