1

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

在此处输入图像描述

4

1 回答 1

2

由于类而添加了左右填充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>

于 2020-02-18T04:34:39.150 回答