0

Есть 4 поля Фамилия, Имя, Отчество, Дата рождения. Не получается настроить стиль таким образом чтобы они верно отображались на странице.

нужно чтобы когда страница раскрыты полностью формы выстраивались как 1 2 3 4.

когда страницу сжимаешь они бы перестраивались.

1 2

3 4

сейчас сделано так

.grid-container {
    width: 100%;
    display: inline;
    grid-gap: 20px 50px;
}

.grid-item {
    width: 25%;
    min-width: 250px;
}
<h:panelGroup id="holder_panel" layout="block">
    <div class="grid-container">
      <div class="item">some code</div>
      <div class="item">some code</div>
      <div class="item">some code</div>  
      <div class="item">some code</div>  
    </div>
</h:panelGroup>

и проблема вот в чем.

когда страница развернута, все ок.

а когда сжимаешь ее, то при вводе в поле 1 неверное информации строка снизу смещает поле 3 в сторону. см рисунок во вложении. отчество съехалопример

1 2

  3

4

как настроить форму?

2
  • необходим полный код, а также какая версия bootstrap используется?
    – soledar10
    28 авг 2018 в 8:53
  • полный код страницы очень большой. bootstrap 3..3.7. 28 авг 2018 в 8:57

2 ответа 2

3

Для бутстрапа 3 версии переменное число колонок делается так:

на мобилках будет

1
2
3
4

на планшетах

1 2
3 4

на десктопах

1 2 3 4

код:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="lastName">Фамилия</label>
            <input type="text" class="form-control" id="lastName" placeholder="Фамилия">
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="firstName">Имя</label>
            <input type="text" class="form-control" id="firstName" placeholder="Имя">
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="secondName">Отчество</label>
            <input type="text" class="form-control" id="secondName" placeholder="Отчество">
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="form-group">
            <label for="birthDate">Дата рождения</label>
            <input type="text" class="form-control" id="birthDate" placeholder="Дата рождения">
        </div>
    </div>
</div>

Дополнено:

если добавить ошибку валидации (любой текст) - такая же проблема будет – soledar10

Можно применить flex, чтобы увеличение высоты блока из-за текста об ошибке меняло и высоту соседа

.flex-row {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

.flex-row .col-flex {
    display: flex;
}

.flex-row .col-flex > div[class*='col-'] {
    margin: -.3px; /* hack adjust for wrapping */
}


<div class="row row-flex">
    <div class="col-xs-12 col-sm-6 col-md-3 col-flex">
        ...
    </div>
</div>
2
  • если добавить ошибку валидации (любой текст) - такая же проблема будет
    – soledar10
    28 авг 2018 в 9:43
  • 1
    дополнил ответ. можно "поиграться" с flex 28 авг 2018 в 9:52
2

Пример

@media screen and (max-width: 991px) {
  [class*=col-]:nth-of-type(2n + 3) {
    clear: left;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="form-group">
      <label for="lastName">Фамилия</label>
      <input type="text" class="form-control" id="lastName" placeholder="Фамилия">
      <p>Error validation</p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="form-group">
      <label for="firstName">Имя</label>
      <input type="text" class="form-control" id="firstName" placeholder="Имя">
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="form-group">
      <label for="secondName">Отчество</label>
      <input type="text" class="form-control" id="secondName" placeholder="Отчество">
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3">
    <div class="form-group">
      <label for="birthDate">Дата рождения</label>
      <input type="text" class="form-control" id="birthDate" placeholder="Дата рождения">
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.