Bootstrap 3中响应式导航栏的问题 [英] Problems with the responsive navbar in Bootstrap 3
问题描述
在Bootstrap的最新版本中，响应式导航栏没有问题，但是我无法使版本3正常工作.切换按钮正确显示，除了品牌以外，其他所有内容均消失，但该按钮不响应点击. ( http://getbootstrap.com/components/#navbar-sensitive )任何帮助都将是非常感激！ 这是到目前为止的代码:
I had no problem with the responsive navbar in the last version of Bootstrap, but I cannot get version 3 to work. The toggle button appears properly and everything disappears but the brand, but the button does not respond to clicks. (http://getbootstrap.com/components/#navbar-responsive) Any help would be greatly appreciated! Here is the code so far:
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Hello World</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<section>
<div class="navbar navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
<div class="nav-collapse navbar-responsive-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="active "><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</section>
推荐答案
我相信下面的代码会产生您想要的效果.具体来说，BS3中没有" navbar-response-collapse "类(请参阅"bootstrap.css"文件).从版本3开始，Twitter Bootstrap在默认情况下是响应式的，因此，许多用于响应性的代码标志现在都包含在框架中，不再需要显式调用.
I believe the code below will produce the effect you're looking for. Specifically, there is no "navbar-responsive-collapse" class in BS3 (see the "bootstrap.css" file). Beginning with release 3 Twitter Bootstrap is responsive by default, so many of the code flags for responsiveness are now baked into the framework and no longer need to be called explicitly.
这是右对齐的可折叠菜单的BS3版本:
Here's a BS3 version of the right-aligned collapsible menu:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active "><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
这篇关于Bootstrap 3中响应式导航栏的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
