Bootstrap-如何水平对齐foreach内的卡？

时间：2018-09-08 19:16:03

标签： php html database twitter-bootstrap foreach 

<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 :(得分：0)

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

将您的“卡片”类显示为嵌入式代码

答案 1 :(得分：0)

您可以使用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>

答案 2 :(得分：0)

根据您想要的内容，您可以使用col- *类来指定每张卡要占用多少个网格。

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

相关问题
最新问题