Разделить секцию на две равные части Bootstrap

589

10 июня 2017, 13:00

Ситуация следующая: необходимо разделить секцию на 2 (две) равные части. Слева белая, справа серая. Сверху этих двух секций лежит текст(левая часть) и форма(правая часть). Этот контент не должен уходить за рамки .container, в то время как фон слева и фон справа должны растягиваться на весь .wrapper (1920px) .

Также, помимо белого фона на левой части лежит картинка. Я вроде бы понял, что она должны располагаться абсолютно этого блока, но вот как растянуть блок на всю ширину, но при этом контент двух блоков сохранить в рамках .container .

Пробовал несколько вариантов.. с .container-fluid - тогда всё растягивается на всю ширину и контент не исключение. Пробовал располагать без .container вовсе, тогда нет границ.

Должно же быть какое-то решение... заранее благодарен!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="container-fluid"> 
  <div class="row"> 
    <div class="text-block col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
      <p><strong>Колбаса “Львовская”</strong> на ваш стол</p> 
      <p>Вся продукция TM «ERICREN» изготовлена по традиционным рецептам ,что позволило добиться превосходных вкусовых качеств мясных изделий.</p> 
    </div> 
 
    <div class=" form-block col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
      <form> 
        <div class="input-group"> 
          <span class="input-group-addon"></span> 
          <input type="text" class="form-control" name="name" placeholder="Ваше имя"> 
        </div> 
 
 
        <div class="input-group"> 
          <span class="input-group-addon"></span> 
          <input type="email" class="form-control" name="email" placeholder="Email"> 
        </div> 
 
        <div class="input-group"> 
          <span class="input-group-addon"></span> 
          <input type="email" class="form-control" name="email" placeholder="Email"> 
        </div> 
 
        <div class="input-group"> 
          <span class="input-group-addon"></span> 
          <select class="form-control" id="kind"> 
											<option>Выбрать изделие</option> 
											<option>Изделие 1</option> 
											<option>Изделие 2</option> 
											<option>Изделие 3</option> 
										</select> 
        </div> 
 
        <div class="input-group"> 
          <span class="input-group-addon"></span> 
          <textarea class="form-control" rows="5" id="comment"></textarea> 
        </div> 
        <button type="submit" class="btn btn-primary">Submit</button> 
      </form> 
    </div> 
  </div> 
</div>

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

Answer 1

Как вариант, создать блок(и) для фона под .container во .wrapperе и задать фон им