使用 Bootstrap 卡片网格时，卡片 header 无法拉伸到卡片边缘

Question

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

Answer 1

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

下面的代码片段：

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

使用 Bootstrap 卡片网格时，卡片 header 无法拉伸到卡片边缘

Card header cannot strech to the card edge when using Bootstrap cards grid

html

css

laravel

bootstrap-4

bootstrap-cards