1

Имеется форма, сверстанная с использованием Bootstrap. Согласно макету заказчика - необходимо выделить левую "колонку" более темным цветом + добавить на ее правой стороне утолщение по размеру соответствующего блока/блоков из правой колонки. Имеется ли возможность сделать это удобным и автоматизированным способом? Заранее спасибо. было надо

1
  • приложите код вашей верстки 21 сен 2016 в 20:33

1 ответ 1

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)
1
  • Спасибо Вам, Виталий, за столь информативный и реально действующий ответ. 22 сен 2016 в 13:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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