По какому принципу написать bootstrap структуру?

Question

[game802]

Добрый день уважаемые знатоки. Столкнулся со следующей проблемой:
Десктопную версию я сверстал, но не понимаю как сделать структуру таким образом, чтобы в адаптиве блоки съезжали не под картинку, а съезжали в соответствии с макетом?

Большое спасибо за помощь!

Comments

[Модератор]

game802, за порчу вопросов будет больно.

Answer 1

[iBird Rose]

красиво ты это через бутсраповские col не реализуешь. делай сам. через inline-block/float:left к примеру. и каждому блоку задавай свою ширину. а в media меняй

Comments

[ProjectSoft]

а как же выравнивание колонок?
Можно реализовать на bootstrap легко и просто

[iBird Rose]

ProjectSoft: ты про какое выравнивание колонок?

[game802]

ух, нет, издеваться над собой я точно не буду. Большое спасибо за ответ.

Answer 2

[Kirill Sharonov]

Скорее вот так, чем вариант в другом комментарии.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            Картинка с названием
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    Цена
                </div>
                <div class="col-lg-3 col-md-6">
                     Количество
                </div>
                <div class="col-lg-3 col-md-6">
                     Сумма
                </div>
                <div class="col-lg-3 col-md-6">
                     Лайки
                </div>
            </div>
        </div>
    </div>
</div>

Comments

[game802]

большое спасибо за ответ и помощь в решении данного вопроса!

Answer 3

[Григорий Васильков]

На бутстрапе 12 колоночная сетка, которая подходит не всегда.
Я написал для себя свои сетки на 2 3 4 6 8 10 12 16 колонок и под каждое разрешение
После этого в конкретном проекте (или модуле) задаю класс b-grid_padding_8 b-grid_margin_bottom_16, а по умолчанию сетка без отступов вообще.

Таким образом если мне нужны нестандартные (неодинаковые колонки) - я либо подбираю нужное соотношение в сетках, а если его невозможно подобрать в процентах - задаю g-grid__col без цифры, а потом добавляю второй класс .b-project__colleft/right и указываю размеры ячеек для левой колонки например width: 200px, для правой width: calc(100% - 200px).

Конкретно по вашему примеру: у вас сетка начинается не отступом, а колонкой (отступа то ли нет вообще, то ли он уже использован для того, чтобы сместить всю верстаемую страницу) - а внутри отступ есть - то есть по любому у вас будет "сетка-в-сетке" или "сетка-в-контейнере".

Comments

[game802]

спасибо за подачу идеи. Обязательно возьму ее себе на заметку!!