Bootstrap 4无法正常工作

Question

我尝试将bootstrap4集成到我的网站，但navbar无效。所有属性都是css中的crossout。有人可以帮我解决这个问题吗？

结果

＆＃13;

＆＃13;

<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">
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在使用引导版本和类的错误组合。

您使用的是 bootstrap4 alpha 版本，<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand bg-light"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul> </nav>类来自 bootstra4 beta 。

Stack Snippet ^{使用Bootstrap4.beta}

＆＃13;

＆＃13;

.navbar-toggleable

＆＃13;

＆＃13;

＆＃13;

但是如果你想继续使用bootstrap alpha版本，你必须使用.navbar-expand而不是.navbar-toggleable，还需要一些额外的css作为 min-width: 576px一直工作到.navbar-toggleable .navbar-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; } .navbar-toggleable .navbar-nav .nav-link { padding-right: .5rem; padding-left: .5rem; }

Stack Snippet ^{使用Bootstrap4.alpha}

＆＃13;

＆＃13;

<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">
<nav class="navbar navbar-toggleable navbar-light bg-faded">
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

在CSS中添加！important。 例如

.navbar-toggleable .navbar-nav {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
}

希望有帮助。