ブートストラップ4 - 中央だけのカード（3つではなく2つ）

Question

ブートストラップ4にcard-columnsクラスを使用して、時々2つから8つまでの異なるカードを持つ動的ページを作成しようとしています。

今のところ私の問題は簡単です：私はjustify-content-aroundクラスのようなものを自分のカードに使用しようとしています。そのため、カードが2枚しかない場合は、互いに隣り合うページに集中します。今、彼らは左にとどまり、左から動かないでしょう。

私はページ上に2枚のカードを並べて探しています。

<div class="container"> 
<div class="card-columns"> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This is a longer card with shorter text.</p> 
    </div> 
    </div> 
</div> 
</div> 

ヘルプは大変感謝しています。

Answer 1

あなたは、単に容器内の行にあなたのカードを2枚入れて、グリッドの特性（6-6）を使用することができます

https://v4-alpha.getbootstrap.com/layout/grid/#equal-width

<div class="container"> 
    <div class="row"> 
    <div class="col-6"> 
     <div class="card"> 
     <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This is a longer card with shorter text. 
     </p> 
     </div> 
     </div> 
    </div> 
    <div class="col-6"> 
     <div class="card"> 
     <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This is a longer card with shorter text. 
     </p> 
     </div> 
     </div> 
    </div> 
    </div> 

</div> 

次に、あなたがあなたのコンテナやセンタリングのための幅を選ぶことができますそれ。

Answer 2

私はD-フレックス正当化 - コンテンツセンターをお使いのカードの列に追加したときに説明した動作を得た：

<div class="container"> 
    <div class="card-columns d-flex justify-content-center"> 
    <div class="card"> 
     <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
     </div> 
    </div> 
    <div class="card"> 
     <div class="card-block"> 
     <h4 class="card-title">Card title</h4> 
     <p class="card-text">This is a longer card with shorter text.</p> 
     </div> 
    </div> 
    </div> 
</div> 

https://jsfiddle.net/3y8ks4em/1/

を