我不能在bootstrap 4导航栏周围放置一个容器

Question

我试图在我的导航栏周围放置一个容器类,但是,切换在移动视图中移动到中心.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="commRollover">
     <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/qube_navbar_brand.webp" width="126px" height="54px"></a>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>

    </nav>

为了阻止这个,我包含了这个jquery代码:

if ($(window).width() < 960) {
    $("#commRollover .container").removeClass("container");
}

但是,导航栏链接位于导航栏品牌下方,我不知道为什么.

这是Codepen

Answer 1

如果你试图将灰色背景全屏显示navbar在内container,你需要做这样的事情......

<div class="bg-faded">
    <div class="container">
        <nav class="navbar navbar-toggleable-md navbar-light" id="commRollover">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="img/qube_navbar_brand.webp" width="126px" height="54px"></a>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <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="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

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