Смещение контейнера слева в начальной загрузке 4

Question

У меня есть два контейнера начальной загрузки, один внутри заголовка панели навигации, второй под панелью навигации. Внутри каждого контейнера есть текст. Я хочу, чтобы текст, находящийся в контейнере navbar, был смещен влево на 15 пикселей для всех отзывчивых точек останова.

Я пытался сделать это, используя отрицательное поле. Вот мой код:

<nav class="navbar px-0 navbar-light fixed-top bg-primary">
    <div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>

и JSFiddle пример.

Этот метод работает, но имеет серьезную ошибку. Когда ширина браузера уменьшается, текст в заголовке панели навигации начинает выходить за пределы экрана. Есть ли способ избежать этого? Конечно, ясно, что я настроил маржу, используя @media, но я думаю, что это не совсем правильный путь.

Answer 1

Вы можете использовать navbar-fixed-top вместо fixed-top для секции navbar. В Bootstrap 4 отрегулируйте поля слева, используя класс CSS по умолчанию ml-1,ml-2,.. и отступ pl-1,pl-2 следующим образом.

Ref Bootstrap 4 интервал

<nav class="navbar navbar-default navbar-fixed-top bg-primary">
  <div class="container">
    Text 1        
  </div>
</nav>
<div class="container">
    <div class="ml-4 mr-4">
     <p>Text 2</p> 
    </div>
</div>

Попробуйте свои ответы здесь: https://jsfiddle.net/testdesigner/aq9Laaew/193572/

Answer 2

Если вы используете правильный способ вложения элементов в Bootstrap, вы получите выравнивание по левой стороне: .row даст вам -15px влево, чтобы противостоять 15px левому отступу на .col-xx-xx. Что вы могли бы сделать, это добавить 15px заполнение в другие контейнеры и позволить navbar сохранить обычный загрузочный контейнер max-width ... Это сохранит стандартное заполнение 15px для navbar на мобильном телефоне / планшете и т. Д. .

<nav class="navbar px-0 navbar-light fixed-top bg-primary">
  <div class="container">
    <div class="row">
     <div class="col-sm-12">Text</div>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="container-inner">Text</div>
    </div>
  </div>
</div>

Пример Codepen