卡片式布局使用哪些元素答案

【问题标题】：what elements to use for a card inspired layout卡片式布局使用哪些元素
【发布时间】：2017-11-16 16:54:13
【问题描述】：

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

应该改用什么元素？

    @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

【问题讨论】：

你试过什么？能不能给个代码。
您在该图像中拥有的是 Bootstrap 3.3.7 面板。卡片取代了 V4 中的面板，但您可以轻松地添加 CSS 以将它们重新设置为样式。
@Klooven 我只是使用了迄今为止最简单的代码。但我添加了一个例子。

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

您可以使用cards 执行类似的操作。我们有一张卡片，里面有多张卡片。然后我添加了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>

【讨论】：