Bootstrap - Как выровнять карту по горизонтали внутри foreach? - PullRequest
0 голосов
/ 08 сентября 2018
<article>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0">
                <?php foreach ($publicacao as $pl): ?>
                    <div class="card">
                        <div class="img-container">
                            <a href="index.php?post=<?php echo $pl['title']?>">
                                <img src="<?php echo $pl['capa']?>" alt="<?php echo $pl['alt']?>" class="card-img-top">
                            </a>
                        </div>

                        <div class="card-body">
                            <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink">
                                <h2 class="cardTitle"><?php echo $pl['title']?></h2>
                            </a>
                            <p class="card-text text-muted"><?php echo $pl['text']?></p>
                            <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</article>

У меня есть этот скрипт, который возвращает записи из моей базы данных. У меня 10 записей в БД, проблема в том, что карты расположены вертикально, одна поверх другой. Правильнее было бы, чтобы карты были выровнены по горизонтали, как мне это сделать?

Ответы [ 3 ]

0 голосов
/ 08 сентября 2018

Вы можете использовать CSS-сетку, это идеальный сценарий, пожалуйста, посмотрите на этот живой пример

.container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 20px;
}

.card {
    margin: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<article>
    <div class="container">
        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>

        <div class="card" style="width: 18rem;">
          <div class="img-container">
            <a href="index.php?post=title?>">
                <img src="path?>" alt="" class="card-img-top">
            </a>
          </div>
          <div class="card-body">
            <a href="index.php?post=title>" class="card-title cardTitleLink">
                <h2 class="cardTitle">Card title</h2>
            </a>
            <p class="card-text text-muted">Title is here</p>
            <a href="index.php?post=title" class="btn btn-outline-danger btn-sm">Continue Lendo</a>
          </div>
        </div>
    </div>
</article>
0 голосов
/ 08 сентября 2018

В зависимости от того, что вы хотите, вы можете использовать col- * class, чтобы указать, сколько сетки вы хотите получить для каждой карты.

.card{
  margin-bottom: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
             <!-- loop simulation -->
              <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/2" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
               <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/1" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
                              <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/3" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
                              <div class="col-6 col-md-3 col-lg-2">
                  <div class="card">

                    <div class="img-container">

                      <a href="index.php?post=<?php echo $pl['title']?>"><img src="http://lorempicsum.com/futurama/630/300/1" alt="Titre 1" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php?post=<?php echo $pl['title']?>" class="card-title cardTitleLink"><h2 class="cardTitle"><?php echo $pl['title']?></h2></a>

                      <p class="card-text text-muted"><?php echo $pl['text']?></p>

                      <a href="index.php?post=<?php echo $pl['title']?>" class="btn btn-outline-danger btn-sm">Continue Lendo</a>

                    </div>

                  </div>
               </div>
               <!-- loop simulation -->
            </div>
0 голосов
/ 08 сентября 2018

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <article>

        <div class="container">

            <div class="row">

                <div class="">

                
                  <div class="card" style="display:inline-block">

                    <div class="img-container">

                      <a href="index.php" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                      <a href="index.php"><h2 class="cardTitle">adfdasf</h2></a>

                      <p class="card-text text-muted">fasfsfa</p>

                      <a href="index.php">Continue Lendo</a>

                    </div>

                  </div>


                    <div class="card" style="display:inline-block">

                    <div class="img-container">

                    <a href="index.php" class="card-img-top"></a>

                    </div>

                    <div class="card-body">

                    <a href="index.php"><h2 class="cardTitle">adfdasf</h2></a>

                    <p class="card-text text-muted">fasfsfa</p>

                    <a href="index.php">Continue Lendo</a>

                    </div>

                    </div>

                     <div class="card" style="display:inline-block">

<div class="img-container">

<a href="index.php" class="card-img-top"></a>

</div>

<div class="card-body">

<a href="index.php"><h2 class="cardTitle">adfdasf</h2></a>

<p class="card-text text-muted">fasfsfa</p>

<a href="index.php">Continue Lendo</a>

</div>

</div>

                  

               

                </div>

            </div>

        </div>

    </article>

Отображение класса вашей карты в виде встроенного блока

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...