Bootstrap 3中响应式导航栏的问题

Question

Bootstrap 3中响应式导航栏的问题

use*_*858 24 navbar twitter-bootstrap twitter-bootstrap-3

我在Bootstrap的最后一个版本中使用响应式导航栏没有问题,但我无法使版本3工作.切换按钮显示正常,但一切都消失了,但品牌,但按钮不响应点击.(http://getbootstrap.com/components/#navbar-responsive)任何帮助将不胜感激!这是迄今为止的代码:

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Phi*_*las 12

我相信下面的代码会产生你正在寻找的效果.具体来说,BS3中没有" navbar-responsive-collapse "类(参见"bootstrap.css"文件).从版本3开始默认情况下,Twitter Bootstrap是响应式的,因此响应性的许多代码标志现在都被添加到框架中,不再需要显式调用.

这是右对齐可折叠菜单的BS3版本:

<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>

Run Code Online (Sandbox Code Playgroud)

是的,我非常清楚bootstrap.css文件不包含"navbar-ex1-collapse"CSS类.我甚至不需要打开它就知道那么多.Bootstrap官方网站的作者也知道这一点.这是一个用于下拉效果的自定义类,它是官方推荐的Bootstrap 3中的处理方式......但是你却因为你不理解而投票.为什么你不能承认"是的,我想我在官方文件中错过了,对不起." 如果BS3作者错了,请与他们一起讨论. (9认同)
嘿@skiabox在你投票之前你应该做一点研究.如果您查看Default Navbar的官方BS3文档,您会看到我的代码示例 - 包括导航栏DIV中的"navbar-ex1-collapse"类 - 主要来自那里......包括类:http ://getbootstrap.com/components/#navbar-default (2认同)

归档时间：	12 年，6 月前
查看次数：	77386 次
最近记录：	10 年，1 月前