Question

我想让我的导航栏可折叠，但我在here中使用的样式似乎与<div class="collapse navbar-collapse">不兼容，而是导致条形消失。问题在于，我所见过的每一段代码都使用了这一特定的代码，因此它不是一个常见的替代品。尝试使用工作示例中的div类通常会破坏样式。

我已经尽可能地修剪代码以保持样式，或者这里是指向它的链接：https://www.bootply.com/lLZDFmgE8t

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <style type="text/css">
    body {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
    .header {
      padding-bottom: 1rem;
      border-bottom: .05rem solid #e5e5e5;
    }
    .header h3 {
      margin-top: 0;
      margin-bottom: 0;
      line-height: 3rem;
    }
    </style>
</head>

<body>
    <div class="container">

      <div class="header clearfix">
        <nav>

          <ul class="nav nav-pills float-right">
            <li class="nav-item">
              <a class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Menu1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Menu2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Menu3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Menu4</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Menu5</a>
            </li>
          </ul>
        </nav>
        <a href="#" style="text-decoration:none;"><h3 class="text-muted">My Website</h3></a>
      </div>

    </div>
</body>
</html>

如果有人能够弄清楚为什么通常的代码不兼容，以及是否有任何潜在的修复方法，我真的很感激。我喜欢在移动设备上崩溃的效果，但我也喜欢那个特定导航栏的风格。

无法从引导程序中的示例折叠导航栏

0 个答案: