How to center a fixed top Navbar in bootstrap 4

I am trying to center a fixed top navbar in Bootstrap 4 apla 6 but it is not centering it, but instead fills the top in full. How can I make it centered while fixed at the top. I have placed the nav bar in a container as mentioned on the website but it is not centering.

Please see images below

Centered but not fixed at top

fixed at top, but filling the width even though it is in a container

<div class="container">
  <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse ">
      <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>
   </div>

---

Make the navbar a container too...

http://www.codeply.com/go/sJbrJciQia

<nav class="navbar container navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

链接地址: http://www.djcxy.com/p/69022.html

上一篇: 查找传递给函数的变量名称

下一篇: 如何在bootstrap中固定顶部导航栏4