引导卡体宽度超过卡页眉和页脚

Posted 2023-02-15

【中文标题】引导卡体宽度超过卡页眉和页脚

【英文标题】：bootstrap card-body width extended past card header and footer

【发布时间】：2020-11-24 21:42:42

【问题描述】：

卡片的页眉和页脚比正文少一点。两边都显出一点白色。如何拉伸页眉和页脚以使其填充到两侧？

谢谢。

代码sn-p：

<div class="container mt-3">

    <div class="row justify-content-md-center">
        <div class="btn btn-secondary btn-md">
            <%= link_to  "Edit User Profile", edit_user_path(@user.id), style: 'color:#FFFFFF' %>
        </div>
    </div>
    <h2 class="text-center mt-4">Articles</h2>

    <% @user.articles.each_slice(3) do |articles| %>
        <div class="row">
        <% articles.each do |article| %>
        
            <div class="card col-4 shadow rounded">
                <%= link_to  "", article_path(article.id), class:"stretched-link" %>
                <div class="card-header font-italic">
                    by <%= article.user.username %>
                </div>
                <div class="card-body mt-4 mb-5">
                    <h5 class="card-title"><%= article.title%></h5>
                    <p class="card-text"><%= truncate(article.description, length:100) %></p>
                </div>
                <div class="card-footer text-muted">
                    <small>Created <%= time_ago_in_words(article.created_at) %> ago, edited <%= time_ago_in_words(article.updated_at) %></small>
                </div>        
            </div>
        <% end %>
        </div>
    <% end %>
</div>

【参考方案1】：

而不是像这样将“card”和“col-4”类应用于同一个DIV：

<div class="row">
    <div class="card col-4">
        <div class="card-header">
            Title 1
        </div>
        <div class="card-body">
            Body 1
        </div>
    </div>

    <div class="card col-4">
        <div class="card-header">
            Title 2
        </div>
        <div class="card-body">
            Body 2
        </div>
    </div>
</div>

如果您改为使用如下所示应用“col-4”的 div 包装每张卡片，则它应该允许页眉和页脚是卡片的整个宽度：

<div class="row">
    <div class="col-4">
        <div class="card">
            <div class="card-header">
                Title 1
            </div>
            <div class="card-body">
                Body 1
            </div>
        </div>
    </div>

    <div class="col-4">
        <div class="card">
            <div class="card-header">
                Title 2
            </div>
            <div class="card-body">
                Body 2
            </div>
        </div>
    </div>
</div>

【讨论】：

详细说明：在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。 https://getbootstrap.com/docs/4.0/layout/grid/