カードに影響を与えたレイアウトにどのような要素を使用するのですか

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のようなクラスを追加しました。

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