Установите точки останова столбца, используя bootstrap 4 - PullRequest
Новая
       22

Установите точки останова столбца, используя bootstrap 4

2 голосов
/ 27 апреля 2020

Я пытаюсь разработать сетку карт, используя строки и столбцы. Поскольку я начал использовать bootstrap, у меня всегда были сомнения относительно правильного использования точек останова столбца. Я предполагаю, что в размере рабочего стола у него будет три столбца, но в мобильном размере эти три столбца «станут» только одним.

Кто-нибудь знает, как я могу настроить точки останова, чтобы получить все в одном колонка, в мобильном размере?

DEMO

. html

<div class="row">
    <div class="col">
        <div class="row">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 16px;">
            <div class="col">
                <div class="row">
                    <div class="col">
                        <div class="card" style="height:100%">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 16px;">
                    <div class="col">
                        <div class="card" style="height:100%">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 16px;">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        This is some text within a card body.
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card body.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 16px;">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="row" style="height:50%">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height:calc(50% - 16px); margin-top:16px">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="row" style="height:25%">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height:calc(75% - 16px); margin-top:16px">
            <div class="col">
                <div class="card" style="height:100%">
                    <div class="card-body">
                        dayly
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Проблема

Imagem

Я установил размер mobl ie и получил 3 столбца, как я могу получить все в одном столбце и занимает весь экран?

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Вместо этого используйте col-sm в столбцах ... 

  <div class="row">
        <div class="col-sm">
            <div class="row">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> dayly </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 16px;">
                <div class="col-sm">
                    <div class="row">
                        <div class="col">
                            <div class="card" style="height:100%">
                                <div class="card-body"> This is some text within a card body. </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 16px;">
                        <div class="col">
                            <div class="card" style="height:100%">
                                <div class="card-body"> This is some text within a card body. </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 16px;">
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card" style="height:100%">
                        <div class="card-body"> This is some text within a card body. </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="row">
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> a </div>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> s </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> s </div>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="card">
                                <div class="card-body"> Ta </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 16px;">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> dayly </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="row" style="height:50%">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> dayly </div>
                    </div>
                </div>
            </div>
            <div class="row" style="height:calc(50% - 16px); margin-top:16px">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> dayly </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm">
            <div class="row" style="height:25%">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> dayly </div>
                    </div>
                </div>
            </div>
            <div class="row" style="height:calc(75% - 16px); margin-top:16px">
                <div class="col">
                    <div class="card" style="height:100%">
                        <div class="card-body"> dayly </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

https://codeply.com/p/DPFuoonZgF

Также вы можете использовать утилиты заполнения (ie : pb-3) в некоторых столбцах для создания вертикального интервала на мобильном телефоне.

1 голос
/ 27 апреля 2020

Это 1 столбец на мобильном устройстве и 3 столбца в противном случае на основе сетки из 12 столбцов. 

<div class="col-12 col-md-4">...</div>

Инструкция: заполните все 12 столбцов по умолчанию (сначала мобильный) и заполните 4 поля. в противном случае столбцы.

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

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <div class="card">
        <h1>Card 1</h1>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card">
        <h1>Card 2</h1>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="card">
        <h1>Card 3</h1>
      </div>
    </div>
  </div>
</div>

Codepen здесь .

https://getbootstrap.com/docs/4.0/layout/grid/

...