Вопрос по twitter-bootstrap, bootstrap-4, html, css, twitter-bootstrap-3 – Нет, приятель, тег <div> в порядке! Нет проблем с закрытием div. Я обновлю свой ответ, чтобы сделать это более очевидным.

4

ьзуя этот код:

<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))

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

<label class = "col-4 col-form-label"> Электронная почта </ label>. Попробуй это pyrogrammer
@pyrogrammer приятель! Это не ответ! Вы хотите, чтобы я сделал колонку с надписью 'col-4' для чего? Что будет исправлено с этим? Ты хоть прочитал мой вопрос? Вы даже проверили свой ответ? Afshin Gh

Ваш Ответ

2   ответа
5

ия), поэтому по мере сужения ширины экрана столбцы переносятся (располагаются вертикально). Чтобы предотвратить это, отрегулируйте отступы столбцов внутриrow. Bootstrap 4 имеетno-gutters класс для этой цели ...

https://www.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 упаковка
Bootstrap xs столбцы обтекание

-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>

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

Похожие вопросы