Question

我想在此处添加一个水平导航栏http://v4-alpha.getbootstrap.com/components/navbar/到我的布局，我不明白为什么它太丑了：

      <!DOCTYPE htwml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <meta charset="utf-8">

  <head>
      <title>Nav</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      <script src="js/ui-bootstrap-2.5.0.min.js"></script>

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>



      <style media="screen">
          /* make sidebar nav vertical */

          @media (min-width: 768px) {
              .sidebar-nav .navbar .navbar-collapse {
                  padding: 0;
                  max-height: none;
              }
              .sidebar-nav .navbar ul {
                  float: none;
              }
              .sidebar-nav .navbar ul:not {
                  display: block;
              }
              .sidebar-nav .navbar li {
                  float: none;
                  display: block;
              }
              .sidebar-nav .navbar li a {
                  padding-top: 12px;
                  padding-bottom: 12px;
              }
          }
      </style>

      <style media="screen">
          .hidden {
              display: none;
          }
      </style>
  </head>

  <body>

      <div class="container">

        <div class="row">

          <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Navbar</a>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </nav>

        </div>

          <div class="row">

              <div class="col-sm-3">

                  <div class="sidebar-nav">
                      <div class="navbar navbar-default" role="navigation">
                          <div class="navbar-header">
                              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>
                              <span class="visible-xs navbar-brand">Sidebar menu</span>
                          </div>
                          <div class="navbar-collapse collapse sidebar-navbar-collapse">
                              <ul class="nav navbar-nav">
                                  <li class="active"><a href="#section_1" id="mnuSection1" class="mnu">Section 1</a>
                                  </li>
                                  <li class="active"><a href="#section_2" id="mnuSection2" class="mnu">Section 2</a>
                                  </li>
                                  <li class="active"><a href="#section_3" id="mnuSection3" class="mnu">Section 3</a>
                                  </li>

                              </ul>
                              <!--/ #nav navbar-nav -->
                          </div>
                          <!--/.nav-collapse -->
                      </div>
                  </div>

              </div>

              <div class="col-sm-9">

                  <h2>Test Section</h2>
                  <form class="form-group" action="index.html" method="post" id="sections">

                      <div id="section_1" class="collapse in">
                          section 1

                      </div>
                      <div id="section_2" class="collapse">

                          section 2
                      </div>

                      <div id="section_3" class="collapse">
                          section 3
                      </div>

                  </form>

              </div>

          </div>


      </div>



  </body>

  </html>

Answer 1

你应该在任何其他文件之前包括jquery，在angular之上，然后是bootstrap.min.js，最后是angular。告诉我结果。

在简单的布局中修复丑陋的bootstrap导航栏

1 个答案: