Wyświetlanie artykułów w kolumnach, bootstrap i php

pytanie zadane 1 grudnia 2019 w PHP przez chmod96 Obywatel (1,380 p.)

Cześć,

Mam taki problem chcę wyświetlić artykuły na stronie wykorzystując cards z Boostrap konkretnie Card decks (https://getbootstrap.com/docs/4.3/components/card/#card-decks).

Chodzi mi o to, że artykuły mają się wyświetlać po 3 w jednym rzędzie i przechodzić do nowej linii. Jednak nie wiem jak zrobić jak mam jedną zmienną z całymi danymi $articles np. 86 lub 151 rekordów itp. i muszę zrobić tak że co 3 rekordy robi się nowa linia.

Każda odpowiedź będzie dla mnie ważna więc śmiało piszcie.

3 odpowiedzi

odpowiedź 3 grudnia 2019 przez dawid6512 Gaduła (4,550 p.)

<?php 
echo '<table>';
        for($i=1;$i<150;$i++){
            $j = $i%3;

            if($j == 1) echo '<tr>';

            echo '<td>'.$i.'</td>';

            if($j == 0 OR $i == 149) echo '</tr>';
        }
        echo '<table>';

komentarz 3 grudnia 2019 przez chmod96 Obywatel (1,380 p.)

to nie jest tabela!

1	komentarz 3 grudnia 2019 przez dawid6512 Gaduła (4,550 p.) gosciu robisz sobie jaja? jak chcesz gotowy kod to ci moge podac numer konta, a jak chcesz za darmo to bierz i przerabiaj bo jestes bezczelny.

odpowiedź 3 grudnia 2019 przez lateM Pasjonat (17,660 p.)

Możesz też to rozgryźć od strony CSSa. Cardy są postawione na flexboksie. Wystarczy je lekko nadpisać:

@media (min-width: 768px) { 
.card{
flex: 0 0 33.333333%;
max-width: 33.33%;
}
}

(Być może będzie trzeba zwiększyć priorytet klasy np. poprzez taki zapis: .card-deck .card).

Dzięki temu możesz do wrappera o klasie "card-deck" wrzucać dowolną ilość pojedynczych cardów, a co 3 elementy linia się załamie i element wskoczy pod spód. Bez tych kilku linijek - jeśli będzie w card-deck 1 element, to zajmie on 100% dostępnej szerokości, 2 - każdy po 50, a linia załamie się, jeśli elementy nie będą się mieściły - lekko nieestetyczne.

Chyba, że robisz to dla praktyki, wtedy nie pomogę :) jakiś for loop pewnie musi tego pilnować