-2

Preciso criar uma nova div class="row" quando atingir o limite de 12 colunas, no meu caso eu estou utilizando col-md-3. Portanto, o máximo de itens por coluna são 4.

<?php foreach ($data['palettes'] as $row): ?>
<div class="row">
    <div class="col-md-3">
        <div class="view-palette shadow p-3 mb-5 rounded clearfix">
            <div class="palette">
                <div class="spot color-1" style="background-color: #<?=$row->color1?> !important;"></div>
                <div class="spot color-2" style="background-color: #<?=$row->color2?> !important;"></div>
                <div class="spot color-3" style="background-color: #<?=$row->color3?> !important;"></div>
                <div class="spot color-4" style="background-color: #<?=$row->color4?> !important;"></div>
            </div>
            <div class="float-left mt-3">
                <a href="#" class="btn btn-light btn-sm">
                    <i class="fas fa-heart"></i> 0
                </a>
            </div>
        </div>
    </div>
</div>
<?php endforeach; ?>

A variável $data só está recebendo os dados do banco return $this->db->select("SELECT * FROM palettes");

Só que dessa maneira que eu fiz, está criando uma .row pra cada resultado que está vindo do banco de dados. Como resolvo isso ?

3
  • 2
    E se remover a div com a classe row do laço e usar flexbox ? No caso criaria uma div fora do laço com as propriedades: display: flex; flex-wrap: wrap; Commented 19/02/2020 às 20:47
  • E as colunas ficaria como? Eu ainda estou aprendendo :(
    – Max Fly
    Commented 19/02/2020 às 21:03
  • Mantendo o col-md-3 no item, o flexbox irá organizar automaticamente sem a necessidade da class row Commented 20/02/2020 às 13:49

2 Respostas 2

2

Faça o loop dentro do <div class="row"> e use a classe form-group <div class="col-md-3 form-group"> para adicionar um espaço entre as colunas quando e não couber na mesma row.

Exemplo:

<div class="row">
<?php foreach ($data['palettes'] as $row): ?>
    <div class="col-md-3 form-group">
        <div class="view-palette shadow p-3 mb-5 rounded clearfix">
            <div class="palette">
                <div class="spot color-1" style="background-color: #<?=$row->color1?> !important;"></div>
                <div class="spot color-2" style="background-color: #<?=$row->color2?> !important;"></div>
                <div class="spot color-3" style="background-color: #<?=$row->color3?> !important;"></div>
                <div class="spot color-4" style="background-color: #<?=$row->color4?> !important;"></div>
            </div>
            <div class="float-left mt-3">
                <a href="#" class="btn btn-light btn-sm">
                    <i class="fas fa-heart"></i> 0
                </a>
            </div>
        </div>
    </div>
<?php endforeach; ?>
</div>
-4

Muito simples: o seu foreach está no local errado. A div row ela cria uma nova linha e dentro dessa linha conterá os elementos, entāo o seu foreach deve ser colocado dentro da div.row antes da div.col-md-3

9
  • Mas uma row suporta até 12 colunas, nesse caso irá criar várias colunas de col-md-3, vai extrapolar a row
    – Max Fly
    Commented 19/02/2020 às 21:37
  • isso mesmo, porém quantos registro haverá no seu banco de dados ? Commented 19/02/2020 às 21:39
  • você pode limitar sua consulta no banco de dados... dessa forma virá sempre 4 Commented 19/02/2020 às 21:40
  • O tanto que tiver, é ilimitado saca?
    – Max Fly
    Commented 19/02/2020 às 21:43
  • sim..isso mesmo, deixa eu ver se eu entendi sua necessidade você vai cadastrar varias vezes porem nessa pagina voce irá mostrar sempre os 4 últimos cadastrados ? ou irá mostrar todos os registro cadastrados ? Commented 19/02/2020 às 21:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .