Форма начальной загрузки контролирует выравнивание при изменении размера окна

Question

Здесь используется начальная загрузка 3.3 и angular.

Я пытаюсь создать фильтр поиска над сеткой, но у меня возникли проблемы с выравниванием.На полной странице я вижу, что они выровнены правильно, но когда я пытаюсь изменить размер страницы, все мои элементы управления формой перемешиваются вверх и вниз.Я считаю, что это какой-то класс CSS, который отсутствует, но, похоже, не могу понять, что это такое.Кто-нибудь может направить меня в правильном направлении.

Я также создал демонстрацию stackblitz здесь: https://angular -datrange-enhq8w.stackblitz.io /

Если вы измените размерв окне вы увидите то, о чем я говорю.

Вот редактор стекаблиц для этого: https://stackblitz.com/edit/angular-datrange-enhq8w

Ниже приведен соответствующий код:

<div id="filters"> 
  <form [formGroup]="filtersForm"  >
    <div class="row padding-top-10">
      <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
        <label for="name">Name</label>
        <input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off" class="hidden-xs hidden-sm" />
      </div>
    </div>
   </form> 
 </div>

Такжена заметку, если вы видите демо-версию, я чувствую, что у моего выпадающего меню правильный стиль, есть ли какой-нибудь дополнительный стиль начальной загрузки 3, который я могу добавить для этого.

Спасибо за просмотр.

Всемдля входов?

Answer 1

Проверьте загрузчик Сетка системы .Базовый синтаксис:

• контейнер |контейнер-флюид
  • строка
    • столбцы (общее количество col должно быть 12)

Также, нет необходимости в дополнительных полях для ваших col делений.

<div id="filters"> 
  <form class="container-fluid">
    <div class="row padding-top-10">
      <div class="col-xs-12 col-md-2">
        <div class="form-group">
          <label for="name">Name</label>
          <input formControlName="name" name="name" type="text" autocomplete="off" class="form-control" />
        </div>
      </div>
      <div class="col-xs-12 col-md-2">
        <div class="form-group">
          <label for="age">Age Range</label>
          <select class="form-control" formControlName="age">
            <option [selected] value="">All</option>
            <option *ngFor="let age of ages" value='{{age}}'>
              {{age}}
            </option>
          </select>
        </div>
      </div>
    </div>
  </form>
</div>

---

Если вы хотите сохранить все столбцы в одной строке даже на небольших экранах, удалите col-xs-12 и измените *От 1024 * до col-xs-2.

Answer 2

Система сетки для начальной загрузки утверждает, что каждая строка должна быть обернута классом контейнера.

<div id="filters">
        <form [formGroup]="filtersForm">
            <div class="container-fluid">
                <div class="row padding-top-10">
                    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
                        <label for="name">Name</label>
                        <input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
                            class="hidden-xs hidden-sm" />
                    </div>
                </div>
            </div>
        </form>
    </div>

Это не решает проблему изменения размера.Система сетки начальной загрузки настроена так: для каждой строки есть 12 столбцов.Вы говорите, что для div с классом col-xs-12, сделайте элемент в этом классе шириной 100%, когда размер экрана очень мал.Вы также говорите, что когда он достигает col-md-1 (точка останова среднего размера экрана), он должен иметь ширину 8,3333%.На этой странице у вас есть 6 делений.Поскольку у вас есть 6 делений, 12 столбцов / 6 делений = 2 столбца на деление.Поэтому ваш код должен быть реорганизован примерно так:

<div id="filters">
        <form [formGroup]="filtersForm">
            <div class="container-fluid">
                <div class="row padding-top-10">
                    <div class="col-xs-12 col-md-2 form-group" style="margin-right:65px">
                        <label for="name">Name</label>
                        <input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
                            class="hidden-xs hidden-sm" />
                    </div>
                </div>
            </div>
        </form>
    </div>

Обратите внимание, как я удалил col-sm-12 .. это потому, что col-xs-12 установит ширину для каждого размера экрана до следующего заданного класса.В этом случае у вас есть col-xs-12, поэтому, когда размер экрана равен xs и sm, он будет иметь ширину 100%.Когда он достигает точки останова md, он изменит ширину на 2/12 и будет иметь такую ​​же ширину для экранов lg и xl.