Question

我正在使用bootstrap创建一个菜单。切换时，菜单折叠为汉堡包菜单。导航适用于较早版本的bootstap.min.css，但不适用于最新下载的bootstrap 4.0。在下面的代码中/vendor/bootstrap/bootstrap4.0beta/js/bootstrap.min.js和/vendor/bootstrap/bootstrap4.0beta/css/bootstrap.css是新版本。 vendor / bootstrap / bootstrap.min.css和vendor / bootstrap / bootstrap.min.js是较早的。这里只有较旧版本的css可用（包括旧版本和新版本的js）。任何帮助表示赞赏。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

         <link rel="stylesheet" href="vendor/bootstrap/bootstrap.min.css"> <!--> Older version of bootstrap css  -->
     <!--  <link rel="stylesheet" href="vendor/bootstrap/bootstrap4.0beta/css/bootstrap.css"> -->
    <title>Salapaka Lab</title>
  </head>
<body>

        <nav class="navbar  fixed-top  navbar-inverse  navbar-toggleable-sm" style="background-color: black;">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myMenu" aria-controls="myMenu" aria-expanded="false" aria-label="Toggle Navigation">
                <span class="navbar-toggler-icon">
                </span>
            </button>  
            <a href="#" class="navbar-brand">Salapaka Lab</a>
            <div class="collapse navbar-collapse" id="myMenu" >
              <div class="navbar-nav">
                <a  class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">People</a>
                <a class="nav-item nav-link" href="#">Publications</a>
                <a class="nav-item nav-link" href="#">Downloads</a>
                <a class="nav-item nav-link" href="#">Contact</a>
              </div><!-- navbar-nav -->
            </div> <!--collapse -->
        </nav><!-- nav -->




        <script src="vendor/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
        <script src="vendor/bootstrap/bootstrap4.0beta/js/bootstrap.min.js" type="text/javascript"></script>




</body>
</html>

Answer 1

Bootstrap 4  <dependency> <groupId>javax.xml.bind</groupId> <artifactId>jaxb-api</artifactId> <version>2.3.0</version> </dependency>需要额外的.navbar类（例如：.navbar-expand{-sm|-md|-lg|-xl}）。 Bootstrap文档在Navbar描述的顶部提到了这一点。

在这种特定情况下，我认为您可以自由地将当前.navbar-expand-sm类重命名为.navbar-toggleable-sm，它应该可以正常工作。

Bootstrap导航不适用于新的bootstrap.min.css，但适用于早期版本

1 个答案: