Bootstrap 4, bg-inverse not showing?

问题

Trying to follow the navbar example in Bootstraps documentation, I have a problem where the background colour of the navbar doesn't get loaded.

<nav class="navbar navbar-inverse bg-inverse">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

I took a look in bootstrap.css and bg-inverse does not appear there. Am I supposed to create the colours myself, or am I doing something wrong? (I am working in an Angular project)

回答1:

I think you are using Bootstrap beta version. Use the Alpha version. It will solve the problem , they are not provide bootstrap 4 beta for the navbar-inverse bg-inverse

bootstrap -v 4.0.0.alpha6

<nav class="navbar navbar-inverse bg-inverse">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-inverse bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

look at this https://getbootstrap.com/docs/4.0/components/navbar/

bootstrap@4.0.0-beta

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

look at this https://getbootstrap.com/docs/4.0/components/navbar/

回答2:

Bootstrap 4 doesn't have css classes navbar-inverse bg-inverse. You need to use combination of navbar-light bg-light or navbar-dark bg-darkwith nav component. For example:

<nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> </nav>

来源：https://stackoverflow.com/questions/46485768/bootstrap-4-bg-inverse-not-showing

标签

css

bootstrap-4