css - Twitter Bootstrap 3 - 在词缀滚动上丢失容器全宽

Question

• 推特 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% 并占据视口(viewport)的整个宽度(黄色区域)
2. 当导航栏中的 scroll spy 踢到 1170px (!) 并且不再是全宽时(见绿色区域)。我希望它一直都是全宽的。

Cam 有人请给我指出正确的方向吗？

Answer 1

在 bootstrap 3 中，.container 有 15px 的 padding-left 和 padding-right。您可以手动将两者设置为 0px;。

同时将 margin-left 和 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;
}