用于卡片灵感布局的元素

Question

我想实现以下布局。因此，在我的模型中，我使用了卡片，因为它们似乎最接近我想要创建的内容。 现在实现布局似乎卡实际上并不是我应该使用的。

应该使用哪些元素？

    @foreach ($foos as $foo)
        <div class="card">
            <div class="card-header">
                {{ $foo->header }}
            </div>
            <div class="card-body">
                <h4 class="card-title">{{ $foo->title }}</h4>
                <p class="card-text">Some text.</p>
            </div>
        </div>
    @endforeach

Answer 1

您可以使用cards执行此类操作。我们的卡里面有多张卡。然后我添加了类似p-2的类，以使主卡中的填充更小。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="card border-primary">
  <div class="card-header bg-primary">Text</div>
  <div class="card-body p-2">
    <div class="card border-success mb-1">
      <div class="card-header bg-success">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card mb-1">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;