Выравнивание формы по разным столбцам - PullRequest
0 голосов
/ 25 сентября 2018

Мне нужно сделать страницу формы, которая разделена на две части: один столбец с определенным цветом слева и другой белый столбец справа.Эти две части содержатся в классе контейнера.Форма должна быть выровнена таким образом, чтобы метки находились в цветном столбце, а входные данные с правой стороны - в белом столбце.

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

Как я мог справиться с этим?Пробовал использовать выбор, который включал столбец меток (col-sm-4) и столбец ввода (col-sm-8), но метки не совмещались по горизонтали с входными данными таким образом.

Макет того, как я это представляю. Добавлены случайные цвета для понятности.Розовое поле - это левый столбец с метками, а белое - столбец ввода.Строка, где встречаются эти два поля / столбца, является линией, с которой нужно выровнять метки и входные данные, поэтому я не могу просто сделать фон каким-то цветом | белым.Выравнивание необходимо при масштабировании.Кроме того, столбец должен быть выровнен по вертикали, когда окно слишком маленькое (например, экран телефона), поэтому метка 1 становится верхней, а ввод - вниз, что является еще одной причиной, по которой должна быть какая-то сетка /столбцы.

Извините, у меня есть код, но в настоящее время он работает не так, как нужно, поэтому я надеюсь, что изображение поможет.

Спасибо!

1 Ответ

0 голосов
/ 29 сентября 2018

Обновление!

Выяснилось, что вместо двух больших столбцов, которые содержат метки и входные данные, у меня были строки с двумя столбцами рядом друг с другом, один из которых содержал метку, а другой - ввод.Сложите эти ряды друг на друга, чтобы они выглядели как два больших столбца и при этом выровнялись правильно.Итак, как-то так, многократно укладываемый в один контейнер:

<div class="row">
   <div class="col-sm-4 green-bg">
        Address
   </div>
   <div class="col-sm-8 white-bg">
       <input type="text" class="form-control" id="name">
   </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...