Bootstrap CSS 不起作用（导航栏）

Question

On demo.mobilifytech.com , I'm working to make a website using bootstrap. The navbar code isn't working right for anything. I've copied the code exactly from the bootstrap website and it still doesn't do what it's supposed to.

My problems are :

1. Navbar is automatically collapse no matter the screen size.
2. Background color isn't changing, text color isn't changing. (such as navbar-inverse, bg-inverse)

I'm not sure what is causing the problem. Please check it out live at demo.mobilifytech.com

    <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>

This is the code I copied from bootstrap, I've tried using the expand class but it doesn't fix it.

Answer 1

在<nav>元素上使用navbar-expand-md而不是navbar-toggleable-md 。

Answer 2

您的代码缺少类navbar-expand-lg这个类.navbar-expand{-sm|-md|-lg|-xl}类在它们的内容折叠在按钮后面时进行更改。

<nav class="navbar navbar-toggleable-md navbar-expand-lg navbar-light bg-faded">