使用 Bootstrap 卡片网格时，卡片标题无法延伸到卡片边缘

Posted 2023-03-05

【中文标题】使用 Bootstrap 卡片网格时，卡片标题无法延伸到卡片边缘

【英文标题】：Card header cannot strech to the card edge when using Bootstrap cards grid

【发布时间】：2020-06-02 01:08:40

【问题描述】：

我在 Laravel 中使用 bootstrap 4 并编写 Blade.php 模板文件。下面是我的代码。

卡片网格看起来不错，但是卡片标题和汽车边缘之间有空格。

<div id="unassigned-list" class="row">
            @foreach ($cardsUnAssignedToCurrentUser as $card)
            <div class="card unassigned border-secondary mt-2 mr-2 col-sm-3">
                <div class="card-header">
                    Card<a href="#" class="card-link pull-right moveBtn">Assign</a>
                </div>
                <div class="card-body unassigned">
                    <h6 class="card-subtitle mb-2 text-muted">First Name</h6>
                    <p class="card-text">@if (strlen($card->first_name) > 0)  $card->first_name  @else None @endif
                    </p>
                    <h6 class="card-subtitle mb-2 text-muted">Last Name</h6>
                    <p class="card-text">@if (strlen($card->last_name) > 0)  $card->last_name  @else None @endif</p>
                    <h6 class="card-subtitle mb-2 text-muted">Last Four Number</h6>
                    <p class="card-text"><strong> $card->last_four_digits </strong></p>
                    <input type="hidden" value=" $card->id " />
                </div>
            </div>

            @endforeach
</div>

【参考方案1】：

由于col-sm-3 类而添加了左右填充...只需覆盖这些以获得您想要的...

代码 sn-p 如下：

.card.unassigned.border-secondary.col-sm-3 
  padding-right: 0;
  padding-left: 0;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class='container'>
  <div id="unassigned-list" class="row">
    <div class="card unassigned border-secondary mt-2 mr-2 col-sm-3">
      <div class="card-header">
        Card<a href="#" class="card-link pull-right moveBtn">Assign</a>
      </div>
      <div class="card-body unassigned">
        <h6 class="card-subtitle mb-2 text-muted">First Name</h6>
        <p class="card-text">@if (strlen($card->first_name) > 0)  $card->first_name  @else None @endif
        </p>
        <h6 class="card-subtitle mb-2 text-muted">Last Name</h6>
        <p class="card-text">@if (strlen($card->last_name) > 0)  $card->last_name  @else None @endif</p>
        <h6 class="card-subtitle mb-2 text-muted">Last Four Number</h6>
        <p class="card-text"><strong> $card->last_four_digits </strong></p>
        <input type="hidden" value=" $card->id " />
      </div>
    </div>
    <div class="card unassigned border-secondary mt-2 mr-2 col-sm-3">
      <div class="card-header">
        Card<a href="#" class="card-link pull-right moveBtn">Assign</a>
      </div>
      <div class="card-body unassigned">
        <h6 class="card-subtitle mb-2 text-muted">First Name</h6>
        <p class="card-text">@if (strlen($card->first_name) > 0)  $card->first_name  @else None @endif
        </p>
        <h6 class="card-subtitle mb-2 text-muted">Last Name</h6>
        <p class="card-text">@if (strlen($card->last_name) > 0)  $card->last_name  @else None @endif</p>
        <h6 class="card-subtitle mb-2 text-muted">Last Four Number</h6>
        <p class="card-text"><strong> $card->last_four_digits </strong></p>
        <input type="hidden" value=" $card->id " />
      </div>
    </div>
    <div class="card unassigned border-secondary mt-2 mr-2 col-sm-3">
      <div class="card-header">
        Card<a href="#" class="card-link pull-right moveBtn">Assign</a>
      </div>
      <div class="card-body unassigned">
        <h6 class="card-subtitle mb-2 text-muted">First Name</h6>
        <p class="card-text">@if (strlen($card->first_name) > 0)  $card->first_name  @else None @endif
        </p>
        <h6 class="card-subtitle mb-2 text-muted">Last Name</h6>
        <p class="card-text">@if (strlen($card->last_name) > 0)  $card->last_name  @else None @endif</p>
        <h6 class="card-subtitle mb-2 text-muted">Last Four Number</h6>
        <p class="card-text"><strong> $card->last_four_digits </strong></p>
        <input type="hidden" value=" $card->id " />
      </div>
    </div>
    <div class="card unassigned border-secondary mt-2 mr-2 col-sm-3">
      <div class="card-header">
        Card<a href="#" class="card-link pull-right moveBtn">Assign</a>
      </div>
      <div class="card-body unassigned">
        <h6 class="card-subtitle mb-2 text-muted">First Name</h6>
        <p class="card-text">@if (strlen($card->first_name) > 0)  $card->first_name  @else None @endif
        </p>
        <h6 class="card-subtitle mb-2 text-muted">Last Name</h6>
        <p class="card-text">@if (strlen($card->last_name) > 0)  $card->last_name  @else None @endif</p>
        <h6 class="card-subtitle mb-2 text-muted">Last Four Number</h6>
        <p class="card-text"><strong> $card->last_four_digits </strong></p>
        <input type="hidden" value=" $card->id " />
      </div>
    </div>

  </div>
</div>