BootStrap 3-修复了导航栏似乎无法运行的问题

Question

I'm just beginning with twitter bootstrap 3. I just made this fixed navigation bar, but it doesn't seems to be working. 我只是从twitter bootstrap 3开始。我只是制作了这个固定的导航栏，但是它似乎没有用。 The navbar isn't fixed. 导航栏不固定。

Here's the code. 这是代码。 What am I doing wrong ? 我究竟做错了什么？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&amp;subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
                <!--  ==========  -->
                <!--  = Logo =  -->
                <!--  ==========  -->
                <div class="span7">
                    <a class="brand" href="index.html">
                        <span class="pacifico">Webmarket</span> 
                    </a>
                </div>
    </div>
    <!-- ============= -->
    <!-- NavBar -->
    <br>
    <div class="container-fluid">
            <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-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                </div>

                <div class="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Find Your Mac</a></li>
                        <li><a href="#">How it Works</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">FAQ</a></li>
                    </ul>

                </div>

        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Live Link :- http://robocorp.in/design/ Any suggestions are welcome. 实时链接：-http: //robocorp.in/design/任何建议都欢迎。

Answer 1

<div class="navbar navbar-default navbar-fixed-top navbar-main">
    <div class="container">
        <div class="row">
            <div class="col-md-15 col-center">
                <div class="navbar-header">
                      <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="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Find Your Mac</a></li>
                        <li><a href="#">How it Works</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">FAQ</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Try this and let me know. 试试这个，让我知道。 You have way too many span icon bars for the support for other devices, so I removed a couple. 您的跨度图标栏太多，无法支持其他设备，因此我删除了几个。

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

These don't exist on your webserver. 这些在您的网络服务器上不存在。 I suggest putting the CSS In a folder called "assets" and then refering to them like so: 我建议将CSS放在一个名为“ assets”的文件夹中，然后像这样引用它们：

<link href="/assets/bootstrap.min.css" rel="stylesheet">
<link href="/assets/main.css" rel="stylesheet">

and the same with the JS 和JS一样

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&amp;subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<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-collapse">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Find Your Mac</a></li>
            <li><a href="#">How it Works</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </div>
</div>
<div class="row">
    <a class="brand" href="#">Test</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

</body>
</html>

BootStrap 3-修复了导航栏似乎无法运行的问题

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-03-21 18:57:37

解决方案2
0 2014-03-21 19:44:59

BootStrap 3-修复了导航栏似乎无法运行的问题

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-03-21 18:57:37

解决方案2 0 2014-03-21 19:44:59

解决方案1
0 已采纳 2014-03-21 18:57:37

解决方案2
0 2014-03-21 19:44:59