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

Posted 2023-03-06

【中文标题】Twitter Bootstrap 3 - 在词缀滚动上丢失容器全宽

【英文标题】：Twitter Bootstrap 3 - Losing container full width on affix scroll

【发布时间】：2019-11-18 23:37:30

【问题描述】：

Twitter 引导程序 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 更改，我似乎都无法解决：

我希望蓝色条“Take Text Title...”为 100% 并占据视口的整个宽度（黄色区域） 当滚动间谍在导航栏中踢到 1170 像素 (!) 并且不再是全宽时（见绿色区域）。我希望它一直是全宽的。

有人请在这里指点我正确的方向吗？

【问题讨论】：

您是否介意添加代码 sn-p 以重现您的问题。

正如文档所说“通过数据属性或手动使用您自己的 javascript 使用附加插件。在这两种情况下，您必须为附加内容的定位和宽度提供 CSS。”所以你应该使用类似的东西：left: 0; right: 0; margin: 0 auto;

@ZohirSalak 很遗憾，我无法发布独立样本。我不得不扩展一个正在生产中的现有网站，并且拉出所有其他东西是不可行的。

【参考方案1】：

在引导程序 3 中，.container 有 15px 的 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;