ブートストラップカードのコンテナを水平に伸ばすには？

Question

私はブートストラップ4枚のカードで遊んでいます。 （https://v4-alpha.getbootstrap.com/components/card/）

私は、内部にカードデスクを備えた容器を持っています。 新しいカードを内部に差し込む限り、自分のコンテナを水平に伸ばしたい（水平スクロールバーが表示されるはずです）。

デフォルトでは、コンテナの幅が画面の幅より大きい場合にブレークが発生します。ブートストラップは、残りのカードの横に2行目を作成します。

私はtrelloを見ることで何を達成したいのか分かります。

あなたのアイデアをお待ちしております！ おかげ

編集：あなたはcard-deckにdisplay: inline-flex; flex-wrap: nowrap;を与える場合は、ここでのコード

<div class="container"> 
    <div class="card-deck"> 
     <div class="card"> 
      <h3 class="card-header">Paris</h3> 

      <div class="card-block"> 
       <h4 class="card-title">Bruno</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> 
       <a href="#" class="card-link">Card link</a> 
       <a href="#" class="card-link">Another link</a> 
      </div> 
     </div> 

     <div class="card"> 
      <h3 class="card-header">Paris</h3> 

      <div class="card-block"> 
       <h4 class="card-title">Bruno</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> 
       <a href="#" class="card-link">Card link</a> 
       <a href="#" class="card-link">Another link</a> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

がある、彼らは1行に

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<style> 
 
.card-deck { 
 
    display: inline-flex; 
 
    flex-wrap: nowrap; 
 
} 
 
</style> 
 

 
<div class="container-fluid"> 
 
    <div class="card-deck"> 
 
    <div class="card"> 
 
     <h3 class="card-header">Paris</h3> 
 

 
     <div class="card-block"> 
 
     <h4 class="card-title">Bruno</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> 
 
     <a href="#" class="card-link">Card link</a> 
 
     <a href="#" class="card-link">Another link</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="card"> 
 
     <h3 class="card-header">Paris</h3> 
 

 
     <div class="card-block"> 
 
     <h4 class="card-title">Bruno</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> 
 
     <a href="#" class="card-link">Card link</a> 
 
     <a href="#" class="card-link">Another link</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="card"> 
 
     <h3 class="card-header">Paris</h3> 
 

 
     <div class="card-block"> 
 
     <h4 class="card-title">Bruno</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> 
 
     <a href="#" class="card-link">Card link</a> 
 
     <a href="#" class="card-link">Another link</a> 
 
     </div> 
 
    </div> 
 

 
    
 
    <div class="card"> 
 
     <h3 class="card-header">Paris</h3> 
 

 
     <div class="card-block"> 
 
     <h4 class="card-title">Bruno</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> 
 
     <a href="#" class="card-link">Card link</a> 
 
     <a href="#" class="card-link">Another link</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="card"> 
 
     <h3 class="card-header">Paris</h3> 
 

 
     <div class="card-block"> 
 
     <h4 class="card-title">Bruno</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> 
 
     <a href="#" class="card-link">Card link</a> 
 
     <a href="#" class="card-link">Another link</a> 
 
     </div> 
 
    </div> 
 

 
    
 
    <div class="card"> 
 
     <h3 class="card-header">Paris</h3> 
 

 
     <div class="card-block"> 
 
     <h4 class="card-title">Bruno</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> 
 
     <a href="#" class="card-link">Card link</a> 
 
     <a href="#" class="card-link">Another link</a> 
 
     </div> 
 
    </div> 
 

 
    
 
    <div class="card"> 
 
     <h3 class="card-header">Paris</h3> 
 

 
     <div class="card-block"> 
 
     <h4 class="card-title">Bruno</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> 
 
     <a href="#" class="card-link">Card link</a> 
 
     <a href="#" class="card-link">Another link</a> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>