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

Question

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

 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

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

"In a grid layout, content must be placed within columns and only columns may be immediate children of rows"

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

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

bootstrap 4 arrange the card horizontally using for each loop

asp.net-core

bootstrap-4

card