Рубрики

Как изменить колонку на строку на маленьком дисплее в Bootstrap 4?

Задача состоит в том, чтобы переключить столбец макета сетки Bootstrap 4 в ряд на экранах малого размера.

Синтаксис:

<element class="col-md-4 col-sm-6 ...">...</element>

Подход: для решения данной задачи мы должны использовать сетку Bootstrap 4. Разметка сетки делит всю видимую строку на 12 столбцов одинакового размера. Как только мы окажемся в ряд, мы можем легко указать расположение строк и столбцов в зависимости от размера экрана. Это делается путем добавления класса «col-SIZE-SIZE_TO_OCCUPPY» .

Например, .col-md-4, что означает 4 столбца на экранах среднего размера. Если мы объединяем несколько классов столбцов в одном элементе, мы можем определить, как мы хотим, чтобы макет выглядел на других экранах, и изменить столбцы на строки, как мы хотим. Например, .col-md-4 .col-sm-6 означает, что данный элемент будет занимать 4 столбца в строке для средних экранов (по существу, с учетом большего количества элементов в одной строке), тогда как на меньших экранах он будет занимать 6 столбцов , Если сумма столбцов для любой данной строки превышает 12, она будет автоматически перемещена к следующей строке.

Доступные классы и экраны:

NameClassScreen Size
Extra smallcol-SIZE< 576px
Smallcol-sm-SIZE≥ 576px
Mediumcol-md-SIZE≥ 768px
Largecol-lg-SIZE≥ 992px
Extra Largecol-xl-SIZE≥ 1200px

ПРИМЕЧАНИЕ. Размер в приведенной выше таблице следует заменить на желаемый размер столбца от 0 до 12 включительно.

Пример 1. В этом примере мы создадим простую строку из трех столбцов и переместим один столбец в новую строку на меньших экранах.

<html>

  

<head>

    <link href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 

          rel="stylesheet">

</head>

  

<body>

    <center>

        <h1 style="color: green;">GeeksForGeeks</h1>

        <div class="row">

            <div class="col-md-4 col-sm-6" 

                 style="background-color: chartreuse;">

                <br>

            </div>

            <div class="col-md-4 col-sm-6" 

                 style="background-color: black;">

                <br>

            </div>

            <! - сумма SM col превышает 12, так что если на экране

                 маленький (менее 576 пикселей) последний столбец

                 Автоматически выровняется в следующем ряду ->

            <div class="col-md-4 col-sm-6" 

                 style="background-color: rebeccapurple;">

                <br>

            </div>

        </div>

    </center>

</body>

  

</html>

Вывод. Когда размер экрана становится меньше 576 пикселей (SM), столбец автоматически выравнивается по следующей строке.

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

<!DOCTYPE html>

<html>

  

<head>

    <link href=

"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 

    rel="stylesheet">

</head>

<body>

    <center>

        <h1 style="color: green;">GeeksForGeeks</h1>

        <div class="row container">

            <div class="col-md-4 col-sm-12">

  

                <! - Вложено! переключиться на ряд по мере уменьшения экрана ->

                <div class="row">

                    <div class="col-md-12 col-sm-6" 

                         style="background-color: yellow;">

                        <h3>GeeksForGeeks is awesome!</h3>

                    </div>

                    <div class="col-md-12 col-sm-6" 

                         style="background-color: yellowgreen;">

                        <h3>GeeksForGeeks is actually for geeks!</h3>

                    </div>

                </div>

            </div>

            <div class="col-md-8 col-sm-12" 

                 style="background-color: tomato;">

                <h3>I will switch to row as the screen goes smaller!</h3>

            </div>

        </div>

    </center>

</body>

</html>

Вывод: строка более высокого уровня сжимается до столбца при уменьшении размера экрана, но вложенная сетка имеет противоположный эффект, как определено. (они идут от столбца к строке)

Рекомендуемые посты:

Как изменить колонку на строку на маленьком дисплее в Bootstrap 4?

0.00 (0%) 0 votes