Bootstrap navbar складывает и скрывает контент при изменении размера до размера мобильного телефона

Question

У меня есть стандартная фиксированная навигационная панель BS, за которой следует контейнер-жидкость. Панель навигации имеет 4 столбца, каждый из которых имеет свой цвет фона.

Когда я изменяю размер окна браузера до минимального go, 4 столбца располагаются вертикально.

Это означает, что некоторые содержимого скрыто под столбцами с накоплением.

Я знаю, что при использовании панели навигации вы должны использовать верхний отступ, и это работает, но я не хочу, чтобы мой верхний отступ был установлен к большому значению, так как это создает большой разрыв, когда страница развернута / не в мобильном размере.

<div class="navbar navbar-inverse navbar-fixed-top custom-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 first"></div>
            <div class="col-sm-3 second"></div>
            <div class="col-sm-3 third"></div>
            <div class="col-sm-3 fourth"></div>
        </div>
    </div>
</div>

<div class="container-fluid body-content">
    <div class="row">
        <div class="col-sm-12">
            <h1 class="pull-left">This text is hidden when window resized to small width</h1>
            <h2 class="pull-right">This text is still displayed</h2>
        </div>
    </div>
</div>

Конечная цель состоит в том, чтобы оба h1 и h2 появлялись ниже сложенной панели навигации.

Answer 1

Один из способов сделать это - использовать разные значения заполнения для разных устройств / разрешений (ie mobile / desktop). Посмотрите документацию здесь: https://getbootstrap.com/docs/3.4/css/#grid -media-query

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Так что вы можете сделать это, например,

.body-content {
    padding-top: 100px; /* more space under the menu */
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
    .body-content {
        padding-top: 50px; /* less space under the menu */
    }
}