Помогите с версткой на Bootstrap 3

307
24 июня 2017, 10:27

Добрый день. Подскажите, как сверстать такой дизайн, с использованием bootstrap.

Проблема в том, что весь контент расположен в блоке container? а справа полоски черные уходят до края экрана. У меня пока одна мысль - разместить полоски с позиционированием absolute, внутри контейнера с позиционирование relative, совместив тем самым их с полосами контента. Но это я думаю приведет к неразберихе, в зависимости от размера экрана, придется сильно много корректировать. Есть решение легче?

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

    <div class="container-fluid uslugi">
    <div class="container">
        <h2 class="title">Мы <span>доставляем</span></h2>
        <div class="row uslugi_line u001">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>350</span><br>руб/м </div>
            <div class="col-xs-5 uslugi_name one_line">Песок</div>
        </div>
        <div class="row uslugi_line u002">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>700</span><br>руб/тонна </div>
            <div class="col-xs-5 uslugi_name">Щебень<br>известняковый</div>
        </div>
        <div class="row uslugi_line u003">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>1300</span><br>руб/тонна </div>
            <div class="col-xs-5 uslugi_name">Щебень<br>гравийный</div>
        </div>
        <div class="row uslugi_line u004">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>2000</span><br>руб/тонна </div>
            <div class="col-xs-5 uslugi_name">Щебень<br>гранитный</div>
        </div>
        <div class="row uslugi_line u005">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>1000</span><br>руб/тонна </div>
            <div class="col-xs-5 uslugi_name">Асфальтная<br>крошка</div>
        </div>
        <div class="row uslugi_line u006">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>400</span><br>руб/тонна </div>
            <div class="col-xs-5 uslugi_name">Битый<br>кирпич</div>
        </div>
        <div class="row uslugi_line u007">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>700</span><br>руб/м </div>
            <div class="col-xs-5 uslugi_name one_line">Навоз</div>
        </div>
        <div class="row uslugi_line u008">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>800</span><br>руб/м </div>
            <div class="col-xs-5 uslugi_name one_line">Перегной</div>
        </div>
        <div class="row uslugi_line u009">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>800</span><br>руб/м </div>
            <div class="col-xs-5 uslugi_name one_line">Чернозем</div>
        </div>
        <div class="row uslugi_line u010">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>1000</span><br>руб/м </div>
            <div class="col-xs-5 uslugi_name one_line">Торф</div>
        </div>
        <div class="row uslugi_line u011">
            <div class="col-xs-5 uslugi_img"></div>
            <div class="col-xs-2 uslugi_price">от<br><span>300</span><br>руб/м </div>
            <div class="col-xs-5 uslugi_name one_line">Грунт</div>
        </div>
    </div>
</div>
READ ALSO
Почему не работает margin:auto 0 у слайдера?

Почему не работает margin:auto 0 у слайдера?

Недавно версткой стал заниматься, возникла проблема при вертикальном выравнивании

408
Не добавляется текст в textarea с помощью append

Не добавляется текст в textarea с помощью append

Реализую добавление картинки в новость и смысл таков: при добавлении картинки на сервер - записывается сразу значение в текстовое поле, чтобы...

650
Резиновая галерея

Резиновая галерея

Имеется резиновая галереяИ пока фотографии одинаковой высоты, всё выглядит нормально, но как только какая-то фотка больше или меньше, естественно,...

482