bootstrap 4 расположите карту горизонтально, используя для каждой петли

Question

У меня другая запись автора в таблице Author. Я хочу показать данные об авторе на карточке 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

Вам не хватает основного c правила сетки 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>