我的导航栏不起作用......需要帮助。引导

时间:2016-07-02 15:11:44

标签: css twitter-bootstrap

需要你的帮助。我正在尝试为学校的项目网站创建一个折叠导航栏。由于我刚开始学习bootstrap,我无法看到我做错了什么。 提前谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/mystyle.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div class="container">
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
            <a class="navbar-brand" href="#">Viking's Pawnshop</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right" style="margin-right: 20px">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="slide_cont">

                    <div class="slide">

                        <div class="1">
                        </div>
                        <div class="2">
                        </div>
                        <div class="3">
                        </div>

                    </div>
                    <div class="arrows">
                        <img src="../images/left.png" id="lft">
                        <img src="../images/right.png" id="ryt">
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="text-align: justify;">
            <div class="col-md-4">
                What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="col-md-4">
                What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
            <div class="col-md-4">
                What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </div>
        </div>
    </div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

  

需要JavaScript插件

查看文档:{​​{3}}

您需要同时包含jQuery和(至少)Navbar插件或完整collapse.js,以便您的折叠导航功能正常运行。见bootstrap.js

  

需要jQuery请注意,所有JavaScript插件都需要jQuery   要包括在内,如启动器模板中所示。咨询我们的   bower.json查看支持哪些版本的jQuery。

同时

  1. align已弃用,请参阅What's Included

  2. 由于您将导航放置在容器内,因此您可以在container-fluid内使用navbar,因此navbar-right上没有任何溢出}链接。请参阅此W3C Specs

  3. 您错过了.navbar-header课程。

  4. 工作示例:

    &#13;
    &#13;
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container">
    
      <nav class="navbar navbar-default navbar-static-top">
        <div class="container-fluid">
    
          <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Viking's Pawnshop</a>
          </div>
    
          <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Home</a>
              </li>
              <li><a href="#">Services</a>
              </li>
              <li><a href="#">Contact Us</a>
              </li>
              <li><a href="#">Login</a>
              </li>
            </ul>
          </div>
    
        </div>
      </nav>
    
      <div class="row">
        <div class="col-md-12">
          <div class="slide_cont">
            <div class="slide">
              <div class="1">
              </div>
              <div class="2">
              </div>
              <div class="3">
              </div>
            </div>
            <div class="arrows">
              <img src="http://placehold.it/150x150" id="lft">
              <img src="http://placehold.it/150x150" id="ryt">
            </div>
          </div>
        </div>
      </div>
    
      <div class="row">
        <div class="col-md-4">
          What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
          specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="col-md-4">
          What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
          specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="col-md-4">
          What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
          specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
          recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
      </div>
    
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    &#13;
    &#13;
    &#13;