bootstrap отзывчивое поведение только на мобильных устройствах - PullRequest
Новая
       31

bootstrap отзывчивое поведение только на мобильных устройствах

0 голосов
/ 28 апреля 2020

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

Я пытался использовать container-sm и container-md, но при изменении размера браузера все равно уменьшается, как я могу изменить это поведение. Мой шаблон выглядит так: 

    <div class="wrapper">
        <div class="container-fluid pl-4 pr-5 pt-4">
            <div class="row">
                <div class="col-sm-3">
                  <!-- content -->    
                </div>
                <div class="col-sm-6 order-2">
                  <!-- content -->
                </div>
                <div class="col-sm-3 order-sm-2 order-sm-2">
                  <!-- content -->
                <div id="#footerPlaceholder"></div>
                </div>       
            </div>
        </div>
    </div>

Можно ли каким-либо образом настроить повторное сжатие столбцов после определенного размера?

РЕДАКТИРОВАТЬ: я хочу, чтобы все элементы в теге "HTML" изменить размер только после, например, экранов <600px </p>

1 Ответ

0 голосов
/ 28 апреля 2020

Вы должны добавить col перед col-sm-3, чтобы решить эту проблему. как это:

Отредактированный код: Если я правильно понял, вы должны добавить размер "col-4" (например) для всех других устройств перед вашим устройством точки останова, таким как маленькие экраны. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
<div class="wrapper">
    <div class="container-fluid pl-4 pr-5 pt-4">
        <div class="row bg-info">
            <div class="col col-4 col-sm-12 bg-info">
              Test  
            </div>
            <div class="col col-4 col-sm-12 order-2 bg-danger">
              Test
            </div>
            <div class="col col-4 col-sm-12 order-sm-2 order-sm-2 bg-success">
              Test
            <div id="#footerPlaceholder"></div>
            </div>       
        </div>
    </div>
</div>
...