Как сделать карточки в ряд?

Question

[dpopov29033]

Я с помощью php циклом вывожу карточки товаров. Их количество зависит от количества записей в mysql.
Не знаю почему но карточки выводятся в столбик, а хотелось бы в ряд. Помогите кто нибудь пожалуйста)
Вопрос наверное больше относится к верстке.

R::close();

$link = mysqli_connect("localhost", "root", "", "redbeen");

$result = mysqli_query($link, "SELECT * FROM tblproduct");
$num_rows = mysqli_num_rows($result);
while ($x<$num_rows) {
$x++; // Увеличение счетчика
$tblproduct = R::load('tblproduct', $x);
echo
'<div class="card m-3" style="width: 18rem;">
  <img class="card-img-top" src="'.$tblproduct->image.'" alt="">
  <div class="card-body">
    <p class="card-text">'.$tblproduct->name.'</p>
  </div>
</div>
</div>';
}

Comments

[Brad9aga]

код нормально выложить не судьба ?

[dpopov29033]

Brad9aga, а что тут не нормально?

[dpopov29033]

Brad9aga, это весь код

[Алекс Глебов]

клади карточки внутрь колонок
https://getbootstrap.com/docs/4.0/layout/grid/

[Brad9aga]

dpopov29033, то есть ты хочешь сказать что у тебя нет ни подключение бутстрапа ни стилией, один голый php с куском html ?

[dpopov29033]

Brad9aga, а зачем тебе видеть подключения?

[dpopov29033]

Brad9aga, для людей, которые разбираются и этого будет достаточно

Answer 1

[Konstantin Zhikhor]

попробуй этот шаблон если у тебя bootstrap

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Comments

[dpopov29033]

спасибо тебе огромное, у меня получилось!!!

[Brad9aga]

dpopov29033, да неужели

[dpopov29033]

Brad9aga, ну не ты же ответ написал

[Brad9aga]

dpopov29033, делать мне больше нечего, нормально делай, нормально будет

[dpopov29033]

Brad9aga, если тебе делать нечего, зачем ты тогда вообще начал писать в эту тему?
если все равно толкового ничего не сказал, это же пустословие

Answer 2

[Andrew]

Все карточки оберните в .row
те эхо сделайте до цикла с <div class="row">
и в конце(после цикла) закройте

.row {
display: flex;
flex-wrap: wrap;
}

Answer 3

[Siverius]

Как вариант - использовать css
.card{display: inline-block;}