Bootstrap listeleme ayarları nasıl olmalı?

backf6

Hectopat
Katılım
18 Aralık 2020
Mesajlar
173
Daha fazla  
Cinsiyet
Erkek
Merhaba. HTML, CSS, Bootstrap ve PHP kullanarak bir site oluşturmaya çalışıyorum. Ana ekranda haberlerin Card yapısında gözükmesini istiyorum. Haberlerin kapladığı alanı ise 12'lik sisteme göre yapıyorum. Bir satırda 5 tane haber olmasını istiyorum ve bu Card'lar arasında sağdan margin olmasını istiyorum. Eğer Card'ların kapladığı yeri col-LG-2 ile belirtip sağdan da mr-1 verisem bu şekilde oluyor.

1711669891673.png


Eğer Card yapılarını col-LG yaparsam ve mr-1 yaparsam ilk görünüşte bir sıkıntı çıkmıyor ama kesin bir görüntü belirtmediğimiz için alta tek kalan genişliyor. Ama sağdan 1 birim boşuk bırakabiliyorum.

1711670005482.png


İstediğim şey Card'ların sabit bir yapıya sahip olup hepsinin arasında 1 birimlik margin istiyorum.

Kod:
for ($i = 0; $i < $newsCount; $i += 5) {
                                    echo '<div class="row d-flex justify-content-between mb-4">';
                                    for ($j = $i; $j < $i + 5 && $j < $newsCount; $j++) {
                                        $indexNews = $allIndexNews[$j];
                                        echo '<div class="card col-lg mr-1">';
                                        echo '<div class="card__header" style="height: 200px; display: flex; justify-content: center; align-items: center;" >';
                                        echo '<a href="single-post.php?id=' . $indexNews["id"] . '"><img height="200px" src="admin/pages/uploadPic/' . $indexNews["newsPic"] . '" alt="card__image" class="card__image" style="height: 100%; object-fit: cover;"></a>';
                                        echo '</div>';
                                        echo '<div class="card__body">';
                                        echo '<a href="single-post.php?id=' . $indexNews["id"] . '" style="text-decoration:none;color:black"><h5>' . StrlenDotTitle($indexNews["newsTitle"]) . '</h5></a>';
                                        echo '</div>';
                                        echo '<div class="card__footer">';
                                        echo '<div class="user">';
                                        // echo '<img src="https://i.pravatar.cc/40?img=3" alt="user__image" class="user__image">';
                                        echo '<div class="user__info">';
                                        echo '<h5>' . StrlenDot($indexNews["name"]) . '</h5>';
                                        echo '<small>' . $indexNews["createdDate"] . '</small>';
                                        echo '</div>';
                                        echo '</div>';
                                        echo '</div>';
                                        echo '</div>';
                                    }
                                    echo '</div>';
                                }
 

Yeni konular

Geri
Yukarı