卡片灵感布局使用哪些元素？

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

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

​

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

​