Пожалуйста, объясните мне поведение Bootstrap сеток для этого конкретного примера c - PullRequest
Новая
       1

Пожалуйста, объясните мне поведение Bootstrap сеток для этого конкретного примера c

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

Я изучаю bootstrap ver 4.4.1 и пытаюсь понять этот код 

<div class="container">
<div class="row">
<div class="col">1</div>               <!--First line-->
<div class="col-sm">2</div>            <!--Second line-->        
<div class="col">3</div>               <!--Third line--> 
</div>
</div>

Для точки останова <576px я получаю 3 вертикально сложенных строки, охватывающих весь контейнер. Однако в соответствии с bootstrap автоматической компоновкой столбцов столбец столбца в первой строке и столбец столбца в третьей строке должны составлять столбец 6 для первой и третьей строк соответственно и должны показывать ширину 50% для столбца в первой строке и ширину 50% для столбца третьей строки вместе со всем диапазоном столбца в строке 2 </p>

И почему он показывает 3 столбца в горизонтальном положении, когда мы находимся в точке останова небольших устройств, которая> 576px, может кто-нибудь объяснить мне это отклонение в выводе от того, что я ожидал , Я прилагаю изображения для оригинального вывода и мой ожидаемый вывод. Изображение здесь Sample image

1 Ответ

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

Простой ответ: потому что именно так он и должен работать.

Однако в соответствии с bootstrap автоматическим расположением столбцов столбец в первой строке и столбец в третьей строке должны образовывать столбец 6 для первой строки и третьей строки соответственно и должны показывать 50% ширины для столбца в первой строке и 50% ширины для столбца третьей строки вместе со всем диапазоном столбца в строке 2

Я не уверен, если я Я правильно понимаю вас, но это не так, как col против col-sm работает. Они не являются показателями того, сколько ширины они занимают, а просто , когда они должны быть приняты во внимание.

col и col-sm оба пытаются отрегулировать свой размер в соответствии с другие элементы в flexbox . Но col-sm делает это только для точки останова sm и выше. Вот почему вы получаете три горизонтальных столбца на sm и выше (все три столбца являются частью flexbox и имеют одинаковую ширину и расположение).

Как только вы доберетесь до xs col-sm класс «теряет» свои атрибуты flexbox и больше не имеет размера по отношению к элементам flex (столбец 1 и столбец 3), а вместо этого принимает ширину 100%. Это, в свою очередь, приводит к тому, что другие два столбца также автоматически изменяют размер до 100%, потому что они больше не могут автоматически макетировать до 33%.

Чтобы получить желаемый результат, вы должны фактически указать ширину вашего столбцы с col-*. 

<div class="container">
  <div class="row">
    <div class="col-6">1</div>
    <div class="col-12">2</div>
    <div class="col-6">3</div>
  </div>
</div>
...