Alania
@Alania
Дизайнер, верстальщик, программист

Как сделать сложную верстку в несколько колонок на бутстрап?

Надо сделать верстку из нескольких колонок, которые будут динамически создаваться.
Выглядеть они должны примерно таким образом:
1 колонка | 2 колонка | 3 колонка
Тут колонка шириной во все 3
Тут колонка шириной во все 3
Тут колонка шириной во все 3
1 колонка | 2 колонка | 3 колонка
Тут колонка шириной во все 3
Тут колонка шириной во все 3
Тут колонка шириной во все 3
1 колонка | 2 колонка | 3 колонка
Тут колонка шириной во все 3
Тут колонка шириной во все 3
Тут колонка шириной во все 3


Колонки создаются на основе записей в БД, количество длинных и коротких одинаково.
Сама верстка не вызывает вопросов, но основная проблема в том, что надо сделать так, чтобы сначала в строку вставали 3 маленькие, потом 3 большие. Если разбивать на 2 строки, то при получении данных из БД получается, что сначала создаются все маленькие, а после них встают большие
  • Вопрос задан
  • 436 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега Вёрстка
frontend developer
Оставьте бэкэнд в покое. Пусть просто выплевывает блоки сплошным потоком:

Ответ написан
Комментировать
mahmudchon
@mahmudchon
В дополнение к решению выше, исходя из того, что "Сама верстка не вызывает вопросов", если я правильно понимаю, из базы вы получаете массив, который содержит 3 значения.
sandbox.onlinephpfunctions.com/code/98459e336b42b1...
<?php
$array = array(
    '1 колонка',
    '2 колонка',
    '3 колонка'
);

$string_1 = '';
$string_2 = '';

if(count($array) > 0) {
    
    foreach($array as $value) {
        $string_1 .= '    <div class="col">' . $value . '</div>' . PHP_EOL;
        $string_2 .= '<div class="row">' . PHP_EOL . '    <div class="col">' . $value . '</div>' . PHP_EOL . '</div>' . PHP_EOL;
    }
    
    $result = '<div class="row">' . PHP_EOL . $string_1 . '</div>' . PHP_EOL . $string_2;
    
    echo $result;
    
}

Результат:
<div class="row">
    <div class="col">1 колонка</div>
    <div class="col">2 колонка</div>
    <div class="col">3 колонка</div>
</div>
<div class="row">
    <div class="col">1 колонка</div>
</div>
<div class="row">
    <div class="col">2 колонка</div>
</div>
<div class="row">
    <div class="col">3 колонка</div>
</div>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
xEpozZ
@xEpozZ
Веб-разработчик
<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
<div class="row">
    <div class="col"></div>
</div>
<div class="row">
    <div class="col"></div>
</div>
<div class="row">
    <div class="col"></div>
</div>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы