<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>

Tengo este script, que devuelve los registros de mi base de datos. Tengo 10 registros en el DB, el problema es que las tarjetas están en una línea vertical, una encima de la otra. Lo correcto sería que las tarjetas se alineen horizontalmente, ¿cómo hago esto?

2
Susi 8 sep. 2018 a las 22:16

3 respuestas

La mejor respuesta

Según lo que desee, puede usar la clase col- * para especificar cuántas cuadrículas desea que tome cada tarjeta.

.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
Goms 8 sep. 2018 a las 20:20
<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>

Muestra tu clase de 'tarjeta' como un bloque en línea

0
Johnny 8 sep. 2018 a las 19:45

Podrías usar la cuadrícula CSS, este es un escenario ideal, mira este ejemplo en vivo

.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
user615274 8 sep. 2018 a las 19:56