我已经实现了一段代码。当浏览器窗口的大小减小时(宽度方向),菜单选项卡将进入可单击的Hamburger字形图标。
我想保留此功能,但是当浏览器减小尺寸时,在glyphicon外面添加一个导航选项卡。
使用引导程序怎么可能?我试图添加另一个
<div class="navbar"> <ul class="nav navbar-nav"> <li> </li> </ul> </div>
在一个ID之前是“ mainNavBar”,但是这导致格式不佳,我认为可以通过使两个div彼此相邻地浮动来解决此问题,但是我无法解决该问题。
下面是我的代码。
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation bar -->
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
</button>
<a href="../homepage.html" class="navbar-brand"> Markets</a>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li> <a href="../aboutus.html">About Us</a>
</li>
<li> <a href="../news.html">News</a>
</li>
<li> <a href="../analysis.html">Analysis</a>
</li>
<li> <a href="../randomarticle.html">Random Article</a>
</li>
<li> <a href="../contactus.html">Contact Us</a>
</li>
</div>
</nav>
<!-- End Navigation Bar -->
</body>
</html>
最佳答案
Bootply:http://www.bootply.com/Vky1AGlU5F
CSS:
.still_on_view{
float: right;
}
HTML:
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
</button>
<ul class="still_on_view nav navbar-nav">
<li> <a href="../aboutus.html">About Usb2</a>
</ul>
<a href="../homepage.html" class="navbar-brand"> Markets</a>
</div>
<div>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li> <a href="../aboutus.html">About Us</a>
</li>
<li> <a href="../news.html">News</a>
</li>
<li> <a href="../analysis.html">Analysis</a>
</li>
<li> <a href="../randomarticle.html">Random Article</a>
</li>
<li> <a href="../contactus.html">Contact Us</a>
</li>
</div>
</nav>