asp.net-core - bootstrap 4 使用每个循环水平排列卡片

Question

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

 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>

Answer 1

你错过了引导网格的基本规则......

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

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