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

【问题标题】：Bootstrap - How to horizontally align a Card that is inside a foreach?Bootstrap - 如何水平对齐 foreach 内的卡片？
【发布时间】：2018-09-08 19:16:02
【问题描述】： 
<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 条记录，问题是卡片在一条垂直线上，一个在另一个之上。正确的做法是让卡片水平对齐，我该怎么做？

【问题讨论】：

  • 使用css - 类似于float:left;clear:none; 应用于每张卡。
  • @RamRaider 它不起作用：/
  • @RamRaider 可以解决这个问题吗？我是 Bootstrap 的新手。
  • 查看我发布的答案！

标签： php html database twitter-bootstrap foreach


【解决方案1】： 

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

将您的“卡片”类显示为内联块

【讨论】：

  • 这个display:inline-block 不需要，我解决了它只是把foreach 循环放在&lt;div class"row" 下面。
【解决方案2】：

根据你的需要，你可以使用 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>

【讨论】：

  • 谢谢！！我意识到我做错了什么，foreach 循环应该低于&lt;div class="row"&gt;，正如你在评论行中所说的那样。
  • 不客气 ;) 欢迎来到 Stackoverflow 社区！
【解决方案3】：

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

【讨论】：

  • 除非我添加 &lt;div clas"row"> 并将 foreach 循环放在该 div 下方，否则我的 foreach 循环将不起作用。不过还是谢谢你:)
猜你喜欢
  • 2021-12-27
  • 2023-03-27
  • 2021-07-20
  • 2019-03-11
  • 1970-01-01
  • 2016-03-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode