Question

我正在尝试制作砖石卡片，为此我正在使用引导程序4，在添加卡片列类之前，一切正常。

我的html是：

<div class="wrapper">
            <div class="container-fluid">
               <div class="col-12">
                      <div class="row">

                        <?php   echo 
    '<div class="col-md-2">
                     <div class="card-columns">
                    <div class="card">
                         <a href="'.$global_url.'post/'.$row['post_seo_url'].'"><img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail"></a>
                        <div class="card-body">
                            <h4 class="card-title">'.$row['post_name'].'</h4>
                            <p class="card-text">'.short_post($row['post_text'],$rand).' <a href="'.$global_url.'post/'.$row['post_seo_url'].'">read more..</a></p>
                            <p class="card-text">
                                <small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
                            </p>
                        </div>
                    </div>
                     </div>
                </div>'; ?>
                      </div>
               </div>
           </div>
</div>

我正在使用PHP获取信息并将其打印为卡。

Bootstrap中对card-columns的引用。

Answer 1

如果您想限制每列的卡片，只需使用以下结构：

.container> .row> .col-xx

参考： https://www.codeply.com/go/AP1MpYKY2H/bootstrap-4-card-deck-columns-per-row

如果您对每行限制没有问题

.container-fluid> .card-columns> .card（循环）应该足够。

谢谢

Answer 2

这是因为正在打印卡的php函数具有<div class="col-md-2">，对于card-columns来说这是不可能的，因为引导程序将它们设置为响应式，例如：3列或4，所以我删除了{{ 1}}，现在一切正常。

Answer 3

<div class="wrapper">
            <div class="container-fluid">

                      <div class="row">
<div class="col-12">

                        <?php   echo 
    '<div class="col-md-2">
                     <div class="card-columns">
                    <div class="card">
                         <a href="'.$global_url.'post/'.$row['post_seo_url'].'"><img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail"></a>
                        <div class="card-body">
                            <h4 class="card-title">'.$row['post_name'].'</h4>
                            <p class="card-text">'.short_post($row['post_text'],$rand).' <a href="'.$global_url.'post/'.$row['post_seo_url'].'">read more..</a></p>
                            <p class="card-text">
                                <small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
                            </p>
                        </div>
                    </div>
                     </div>
                </div>'; ?>
                      </div>
               </div>
           </div>
</div>

在声明行之前，您已经声明了col-12 div

Answer 4

这是您想要的代码，只需重复"card"类块，如果您想声明不同的列样式，只需在CSS中创建一个婴儿更改，就无需声明col card-columns

内部的类

column-count: 3; // the count number is your choose, depend what column you want

               <div class="card-columns">
                    <div class="card">
                         <a href="#" alt="Thumbnail"></a>
                        <div class="card-body">
                            <h4 class="card-title">Card Title</h4>
                            <p class="card-text">Card text here <a href="#">read more..</a>
                            </p>
                            <p class="card-text">
                                <small class="text-muted">Author: </small>
                            </p>
                        </div>
                    </div>
                </div>

引导卡栏问题-显示混乱

4 个答案: