Что именно делает CSS-класс Bootstrap? - PullRequest
0 голосов
/ 03 октября 2019

Я не могу найти четкую документацию о том, что делает класс начальной группы Bootstrap. Иногда я добавляю его, когда формы не форматируют так, как я хочу, а иногда я удаляю его по той же причине. Иногда это делает слишком большой интервал между строками, в зависимости от того, какие классы используются в элементах ввода. Я обычно стараюсь обходиться без него, позволяя автоматически оборачивать поля в зависимости от их размера (используются ячейки сетки). Это позволяет избежать микроуправляемых разрывов строк.

И это также действует по-разному в разных браузерах и версиях, а также при наличии разных типов виджетов. Например, в браузере версии X может быть все хорошо, прежде чем я добавлю флажок, но при добавлении флажка в просто версия X будет иначе. Этот органический метод проб и ошибок отнимает много времени на "микро-фидлинг". Интересно, нет ли более точного объяснения того, что он делает и почему. Это включает в себя как «горизонтальные» формы, так и обычные формы.

Я искал на getbootstrap.com, не найдя ничего конкретного. Это самая близкая к «официальной» документации, которую я могу найти. Есть ли лучший ресурс?

В дополнение к технической информации, мне интересно, есть ли информация о выборе имени, философии и рекомендуемом его использовании;включая сценарии исключения. Другими словами, что создатель (ы) "группы форм" намеревался ? Это может помочь человеку относиться к его использованию.

<!-- Typical usage for reference -->
<div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput">
</div>

1 Ответ

1 голос
/ 03 октября 2019

Лучший способ узнать, что делает form-group, - это посмотреть исходный код или скомпилированный CSS .

В скомпилированном CSS form-group встречается дважды.

1: добавляет поле внизу формы:

.form-group {
    margin-bottom: 1rem;
}

2: форматы для экранов размером более 576 пикселей:

@media (min-width: 576px) {
  .form-inline label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
  }
...
  1. display: flex;
  2. flex: 0 0 auto; Сокращения для flex-grow: 0;, flex-basis: 0; и flex-shrink: auto;.
  3. flex-flow: row wrap; Гибкие элементы будут отображаться в строках и будут обтекать.
  4. align-items: center; Гибкие элементы будут центрированы по поперечной оси. На CSSTricks есть учебник .
  5. margin-bottom: 0; Нижнее поле 1rem будет видно только на экранах меньше 576px.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...