Сетка Bootstrap ломается в наименьшем размере

avatar
Afshin Gh
8 апреля 2018 в 05:32
556
2
6

Используя этот код:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <label class="col-2 col-form-label">Email</label>

    <div class="col-8">
      <input type="text" class="form-control">
    </div>

    <div class="col-2">
      text
    </div>

  </div>
 </div>

Если изменить размер окна до наименьшего размера, сетка разорвется.

Вот ссылка Bootply.

Просто откройте предварительный просмотр и измените размер окна до минимального размера, и сетка порвется.

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

Это происходит в обеих версиях (4 и 3.7 (col-xs-2))

как это можно исправить?

Источник
pyrogrammer
8 апреля 2018 в 05:46
0

<label class="col-4 col-form-label">Электронная почта</label>. Попробуй это

Afshin Gh
8 апреля 2018 в 21:14
0

@пирограммист, приятель! Это не ответ! Вы хотите, чтобы я сделал метку столбца «col-4» для чего? Что при этом будет исправлено? Вы хоть читали мой вопрос? Вы даже проверили свой ответ?

Ответы (2)

avatar
Zim
8 апреля 2018 в 11:51
6

Столбцы не могут уменьшаться по ширине менее чем на 30 пикселей (из-за отступов), поэтому по мере уменьшения ширины экрана столбцы в конечном итоге смещаются (укладываются вертикально). Чтобы предотвратить это, отрегулируйте отступы в столбцах внутри row. Bootstrap 4 имеет класс no-gutters для этой цели...<6634491252631>

https://codeply.com/go/XaBsD5AhJG

<div class="container">
    <div class="row no-gutters">
        <label class="col-2 col-form-label">Email</label>
        <div class="col-8">
            <input type="text" class="form-control">
        </div>
        <div class="col-2 pl-1">
            text
        </div>
    </div>
</div>

Bootstrap 4 также имеет классы служебных классов заполнения, которые можно использовать для настройки заполнения отдельных элементов. Например, я использовал pl-1(padding-left) в последнем столбце, чтобы оставить небольшое пространство между вводом и «текстом». Другой вариант Bootstrap 4 — использовать flex-nowrap на row, что предотвратит перенос и создание горизонтальной прокрутки при переполнении.

В Bootstrap 3 вам нужно добавить CSS для настройки отступов.

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

Связанные
Bootstrap col-xs wrapping
Bootstrap xs columns wrap

avatar
MR.Mostafa
8 апреля 2018 в 07:28
-1

Вы неправильно закрыли тег <div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="row">
    
    <label class="col-2 col-form-label">Email</label>
    <div class="col-8">
      <input type="text" class="form-control">
    </div>
    <div class="col-2">
      text
    </div>
    
 </div>

</div>
Afshin Gh
8 апреля 2018 в 21:03
0

Нет, приятель, тег <div> подходит! С закрытием div проблем нет. Я обновлю свой ответ, чтобы сделать это более очевидным.