Bootstrap столбцы перекрывают друг друга на мобильных устройствах - PullRequest
Новая
       8

Bootstrap столбцы перекрывают друг друга на мобильных устройствах

0 голосов
/ 30 марта 2020

Я пытаюсь иметь 2 столбца в пределах Bootstrap. Первый (панель навигации) будет иметь полную ширину (col-12), другой столбец (содержимое) будет составлять 1/3 и 2/3 страницы, поэтому col-4 и col-8. Однако на мобильных устройствах вторая строка перекрывает первую строку, как показано на этом рисунке (я добавил красную и черную рамку для строк, чтобы увидеть проблему):

enter image description here

Теперь, когда я делаю нижнее поле в первой строке, я вижу следующее:

enter image description here

До сих пор по какой-то причине navbar перекрывает строку

Код навигационной панели: 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
    </div>
</nav>

И код тела: 

<div class="container shadow">
    <div class="row">
        <div class="col-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
         {....}
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-6 card border-0">
            <div class="leftColumn">
               {...}
            </div>
        </div>
        <div class="col-lg-8 col-md-6 card border-0">
            <div class="rightColumn">
                {...}
            </div>
        </div>
    </div>
</div>

Что я делаю не так?

EDIT :

Из документации bootstrap:

'Фиксированные навигационные панели используют положение: фиксированное, означающее, что они вытягиваются из нормального потока DOM и может потребовать пользовательский CSS (например, верхний отступ) для предотвращения наложения на другие элементы. '

Ссылка на кодовый блок:

https://codepen.io/witteWas/pen/xxGMYYa

РЕДАКТИРОВАТЬ:

Проблема была решена путем размещения 2-й строки внутри первого ряда. 

<body>
  <div class="container">
    <div class="row">
      <div class="card has-shade">
        <div class="col-12">
          <nav class="navbar navbar-expand-sm navbar-light">
          {...}
         </nav>
          <div class="row">
            <div class="col-lg-4 col-sm-12 card border-0">
              {...}
            </div>
            <div class="col-lg-8 col-sm-12 card border-0">
              {...}
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

1 Ответ

0 голосов
/ 31 марта 2020

Во-первых, ваши классы столбцов перепутаны.

Класс .col-md- означает ...

(средние устройства - ширина экрана равна или больше 768 пикселей)

класс .col-lg- означает ...

(большие устройства - ширина экрана равна или превышает 992 пикселя)

Если у вас есть col-md на одном из ваших это уже по сути, включает в себя все устройства 992px или выше. Вероятно, есть некоторые конфликты, возникающие из-за использования обоих этих классов вместе.

Это, похоже, повторяется и в разделе тела. Используйте один из этих двух классов, и если вам нужно, чтобы пользовательский css применялся к определенным разрешениям, используйте медиа-запрос в вашем стиле. css file.

...