bootstrap 4 使用每个循环水平排列卡片

Posted 2023-03-28

【中文标题】bootstrap 4 使用每个循环水平排列卡片

【英文标题】：bootstrap 4 arrange the card horizontally using for each loop

【发布时间】：2020-11-02 15:09:34

【问题描述】：

我在表作者中有不同的作者记录。我想在引导卡中显示作者详细信息以水平排列以在一行中显示多个作者。但是当我试图展示它时，一个作者被连续展示。我正在尝试使用卡片连续列出多条记录。 我的代码如下。

 public class Author

    public int Id  get; set; 
    public string Title  get; set; 
    public string Author get; set; 
    public string Comments  get; set;         

<div class="row">


    @foreach (var author in Model)
    
        <section id="blog" class="py-3">
            <div class="container">
                <div class="col-lg-3 col-md-6">
                   
                        <div class="card">
                            <img src="~/images/blog/blog1.jpeg" class="img-fluid card-img-top" />
                            <div class="card-body">
                                <h4 class="card-title">@author.Title</h4>
                                <small class="text-muted">Written by @author.Author</small>
                                <hr>
                                <p class="card-text">
                                     @Comments
                                </p>
                            </div>
                        </div>

                   

                </div>
            </div>
        </section>
    

</div>

【参考方案1】：

您缺少 Bootstrap 网格的基本规则...

"在网格布局中，内容必须放在列内并且只能 列可能是行的直接子级”

<div class="row">
    @foreach (var author in Model)
    
        
             <section class="col-lg-3 col-md-6 py-3">
                        <div class="card">
                            <img src="~/images/blog/blog1.jpeg" class="img-fluid card-img-top" />
                            <div class="card-body">
                                <h4 class="card-title">@author.Title</h4>
                                <small class="text-muted">Written by @author.Author</small>
                                <hr>
                                <p class="card-text">
                                     @Comments
                                </p>
                            </div>
                        </div>
             </section>
            
    
</div>