Twitter Bootstrap 3 - потеря полной ширины контейнера при прокрутке аффикса - PullRequest
Новая
       19

Twitter Bootstrap 3 - потеря полной ширины контейнера при прокрутке аффикса

1 голос
/ 09 июля 2019
  • 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;
}

что дает мне следующее при первой визуализации страницы:

enter image description here

и затем, когда я прокручиваю (обратите внимание на верхний аффикс):

enter image description here

У меня есть пара проблем, которые я не могу решить, независимо от того, какие изменения CSS я делаю:

  1. Я хочу синюю полосу«Примем текстовое название ...» равным 100% и занимаем всю ширину области просмотра (желтые области)
  2. Когда прокрутка шпионских ударов в панели навигации переходит на 1170 пикселей (!) И больше не является полной шириной (увидеть зеленую зону).Я хочу, чтобы он был на всю ширину.

Кто-нибудь, пожалуйста, укажите мне правильное направление здесь?

1 Ответ

0 голосов
/ 09 июля 2019

В начальной загрузке 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;
}
...