Question

我从msn bootstrap切换到我手动上传的bootstrap。我在云9上做这个项目。当屏幕很小时，导航栏右侧有一个按钮，这会使导航栏下降并显示我的其他链接现在不起作用。它可能是jquery但我不知道我是否把它放在这里或如果我这样做的正确非常感谢任何帮助。

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title> inclass-project </title>
      <link rel="stylesheet" type="text/css" href="css/styles.css"/>    
      <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
      <link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet">
      <link rel="stylesheet" href="css/bootstrap.min.css">
       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script src="js/bootstrap.js"></script> 
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>


        <!--start of nav-->

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
         <a class="navbar-brand" href="#">Adrw4's Site</a>
         <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="collapse navbar-collapse" id="myNavbar">
         <ul class="nav navbar-nav navbar-right">
          <li class="nav-item"><a href="Index.html" class="nav-link">Home</a></li>
          <li class="nav-item"><a href="About.html" class="nav-link">About</a></li>
          <li class="active"><a href="Contact.html" class="nav-link">Contact</a></li>
          <li class="nav-item"><a href="Test.html" class="nav-link">Test</a></li>
         </ul>
        </div>
      </div>
    </nav>


      <!--end of nav section-->


    <section class="hero-section">
      <div class="container">
        <form action="/action_page.php">

         <label for="fname">First Name</label>
         <input type="text" id="fname" name="firstname" placeholder="Your name..">

         <label for="lname">Last Name</label>
         <input type="text" id="lname" name="lastname" placeholder="Your last name..">

         <label for="country">Country</label>
         <select id="country" name="country">
          <option value="usa">Usa</option>
          <option value="canada">Canada</option>
          <option value="england">England</option>
          <option value="other">Other</option>
         </select>

         <label for="subject">Subject</label>
         <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

         <input type="submit" value="Submit">

        </form>
      </div>
    </section>



      <!-- start of footer-->

      <footer class="footer-container">
        <div class="social-media-container left">
         <a href="Https://Www.Facebook.com" class="fa fa-facebook"></a>
         <a href="https://www.instagram.com/" class="fa fa-instagram"></a>
        </div>
        <div class="contact-container left">
          <span>dsafdsf</span>
          <span class="address">fgfggf</span>
           <p>Copyright &copy; 2017 Adrw4 All rights reserved.</p>
        </div>
        <div class="social-media-container right">
      <a href="https://github.com/" class="fa fa-github"></a>
      <a href="https://www.snapchat.com/" class="fa fa-snapchat-ghost"></a>
        </div>
      </footer>

      <!--end of footer-->
    </body>
    </html>

Answer 1

更改

data-target="navbar-collapse"

到

data-target=".navbar-collapse"

我在这里使用了你的导航： http://jsfiddle.net/DTcHh/

引导程序导航栏切换的问题

1 个答案: