Bootstrap 4 - 中心只有兩張卡片（不是三個，只有兩個）

Question

我試圖在Bootstrap 4中使用card-columns類來創建動態頁面，有時可能有兩個卡片，其中有多達8個不同的卡片。

現在，我的問題很簡單：我試圖在卡片上使用像justify-content-around類的東西，這樣，如果只有兩張卡片，它們將自己置於頁面中心旁邊。現在他們留在左邊，他們不會從左邊移動。

我只是在頁面上尋找兩張並排的卡片。

<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

您可以簡單地把你的兩個卡在一個容器內的行和使用網格屬性（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/