Twitter Bootstrap 3-词缀滚动失去容器全宽

Question

• Twitter Bootstrap 3.3.7

我有以下两个导航：

<nav class="navbar navbar-default navbar-fixed-top" id="topNavBar">
  <div class="container-fluid"></div>
</nav>

<nav class="navbar navbar-default navbar-lower" role="navigation" data-spy="affix" data-offset-top="50" data-offset-bottom="80">
    <div class="container container-navbar">
        <div class="row take-test-heading">
            <asp:Label ID="lblTakeTestTitle" runat="server" Text="Take Text Title Here...."></asp:Label>
            <asp:Label ID="lblTakeTestTimeRemaining" runat="server" Text="00:00"></asp:Label>
            <i class="fa fa-bars pull-right"></i>
        </div>
        <div class="row take-test-heading-two">

        </div>
    </div>
</nav>

使用以下CSS：

body {
    margin-top: 50px;
    padding-top: 0px !important;
}

.container-navbar {

}

.take-test-heading {
    background-color: rgb(51, 122, 183);
    height: 20px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 5px;
}

.navbar-lower {
    z-index: 999;
}

在首次呈现页面时，会给我以下内容：

然后滚动（请注意最上面的词缀）：

我遇到了两个问题，无论我进行了哪些CSS更改，我似乎都无法解决：

1. 我希望蓝色条“ Take Text Title ...”为100％，并占据视口的整个宽度（黄色区域）
2. 当滚动间谍进入导航栏时，导航栏将变为1170px（！），并且不再是全角（请参见绿色区域）。我希望它一直保持全宽。

有摄像机的人请把我指向正确的方向吗？

Answer 1

在引导程序3中，.container具有15像素的padding-left和padding-right。您可以将两者都手动设置为0px;。

也可以将margin-left and margin-right设置为0px

.take-test-heading {
    background-color: rgb(51, 122, 183);
    height: 20px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 5px;
}