контейнеры для контейнеров с жидкостью начальной загрузки для разных размеров экрана

Я пытаюсь реализовать дизайн с контейнером для жидкости в начальной загрузке 3.

как бы я ни пытался, положение ящиков отличается при тестировании на разных экранах.

Дизайн должен выглядеть так

Домашняя страница

И то, что я реализовал, здесь

<div class="container-fluid">

    <!-- Marketing Icons Section -->
    <div class="row">
        <div class="col-lg-8 c1">
             <img src="images/slider.png">
        </div>
        <div class="col-lg-4 c2">
             <div class="row">
                <div class="col-lg-12 c3">
                    <img src="images/user.png" class="img-responsive">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 c4">
                <h1>BOX1</h1>

                </div>
                <div class="col-lg-6 c5">

                <h1>BOX2</h1>
                </div>
             </div>

             <div class="row">
                <div class="col-lg-6 c6">
                <h1>BOX3</h1>
                </div>
                <div class="col-lg-6 c7">
                <h1>BOX4</h1>
                </div>
             </div>
        </div>

    </div>

    <div class="row bottom_bg">
    <div class="col-lg-3">
     4+ XXXXXXX
    </div>
    <div class="col-lg-3">
     444+ XXXXXXX
    </div>
    <div class="col-lg-3">
     6664+ XXXXXXX
    </div>
    <div class="col-lg-3">
     89894+ XXXXXXX
    </div>
    </div>

Образец: http://riyalinew.jeddahloyalty.com/html/

  • Должен ли я использовать класс img-responsive в поле ползунка?
  • Должен ли я добавлять минимальную высоту к левой стороне 4 поля?
  • When the brower window is resized, left boxes are coming on top of right slider box.
    • On a big screen the right boxes and left boxes show a wide white area in between .

Можно ли реализовать этот дизайн с контейнером для жидкости?


twitter-bootstrap fullscreen fluid-layout
person codestings    schedule 14.11.2016    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте добавить col-md-x к имени класса div.col-lg-x. col-lg-x был разработан для больших экранов и устанавливает другое значение масштаба для вашего макета.

person vesna    schedule 14.11.2016
comment
эффект тот же, проблема в том, что поля слева всегда должны быть равны большому полю баннера справа. - person codestings; 14.11.2016

arrow_upward
0
arrow_downward

введите здесь описание изображения

Хорошо, редактирование в chrome tool, макс. Я мог бы это сделать. Я не использовал фиксированную высоту. Это можно решить с помощью flexbox. Если бы в ваших коробках было содержимое. Я мог бы получить тот же результат. Я все еще не понимаю, как добавить верхнюю ссылку на профиль, сохраняя при этом одинаковую высоту ящиков.

  <div class="container-fluid">

        <!-- Marketing Icons Section -->
        <div class="row" style="
    display: -webkit-flex;  
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
">


         <div class="col-lg-8 c1" style="flex: 2;">
                 <img src="images/slider.png" class="img-responsive">
            </div>
            <div class="col-lg-4 c2" style="
    padding: 0px;
    /* margin: 0px; */
    flex: 1;
    background: rgba(0, 173, 166, 0.41);">
<div class="c1 row" style="height: 50vh;">//box 1,23,4 row here
person kapil    schedule 14.11.2016
comment
что происходит, когда вы изменяете размер браузера или видите его на большем экране.. - person codestings; 15.11.2016
comment
Он будет нормально работать на больших экранах, но для небольших устройств его необходимо оптимизировать. - person kapil; 15.11.2016

arrow_upward
0
arrow_downward

Используйте col-xs, чтобы использовать одну и ту же форму даже на маленьком экране.

person Acis Tadahy    schedule 15.11.2016
comment
что вы думаете о ползунке на правой стороне. как я смогу держать ползунок и левые боковые ящики на одной финишной линии. (на разных экранах мониторов) - person codestings; 15.11.2016
comment
Установите изображение на отзывчивое. Добавьте следующий css .c1 img { width: 100%; высота: авто; } - person Acis Tadahy; 16.11.2016