Имеется форма, сверстанная с использованием Bootstrap. Согласно макету заказчика - необходимо выделить левую "колонку" более темным цветом + добавить на ее правой стороне утолщение по размеру соответствующего блока/блоков из правой колонки. Имеется ли возможность сделать это удобным и автоматизированным способом? Заранее спасибо.
-
приложите код вашей верстки– Vadzim Liashkevich21 сен 2016 в 20:33
1 ответ
Ваша верстка в упрощенном виде выглядит так:
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3"></label>
<div class="col-sm-9">
<input class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3"></label>
<div class="col-sm-9">
<textarea class="form-control js-ckeditor"></textarea>
</div>
</div>
</form>
.form-group
- играют роль строк, label
располагается в колонке col-sm-3
слева (у вас может быть другая колонка, и, следовательно, другая ширина).
Решить вашу задачу в рамках подобной верстки - можно в два этапа:
Этап 1. Заливаем цветом левую половину формы
У нас нет явно заданной в верстке одной общей левой колонки для всего контента. Однако нам известен класс, который мы используем для лейблов (col-sm-3
), а значит - известна ширина (в стилях бутстрапа, у col-sm-3
- ширина 25%).
Это значит, что мы можем залить сплошным цветом - псевдоэлемент у формы, и расположить его ровно под левой колонкой, по ее размерам:
.form-horizontal::before {
background-color: #fb1;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 25%;
}
И за счет margin
вы можете подрегулировать расположение псевдоблока с учетом бутстраповского $grid-gutter-width
- зазора между колонками.
Этап 2. Ставим вертикальные черты по высоте инпутов
Решается точно так же - псевдоэлементами:
.form-horizontal .form-control::before {
background-color: #bada55;
content: '';
height: 100%;
left: -50px;
position: absolute;
top: 0;
width: 3px;
}
Таким способом вы располагаем псевдоэлемент чуть левее (left: -50px;
) инпута. Значение подбираем специально, чтобы псевдоэлемент лег на границе залитого цветом блока из первого этапа.
Также обратите внимание, что на экранах меньших, чем указано у вас в колонках - форма будет не горизонтальная, а вертикальная, и заливать там левую половину не нужно, как и располагать вертикальные черты. Для этого - оберните ваши стили в @media
.
Например у нас указано col-sm-xxx
, значит наши стили нам нужны только на экранах от $screen-sm-min
и выше. @media
-запрос будет такой:
@media (min-width: $screen-sm-min)
-
Спасибо Вам, Виталий, за столь информативный и реально действующий ответ. 22 сен 2016 в 13:29