Как сделать контейнерный контейнер контейнера растягиваться горизонтально?

Question

Я играю с ботстрапом 4 карты. (https://v4-alpha.getbootstrap.com/components/card/)

У меня есть контейнер с картой внутри. Я бы хотел, чтобы мой контейнер растягивался горизонтально, пока я вставляю новые карты внутри (горизонтальная полоса прокрутки должна появиться в какой-то момент).

По умолчанию происходит разрыв, когда ширина моего контейнера больше ширины экрана. И bootstrap создает вторую строку рядом с оставшимися картами.

Вы можете видеть, чего я хочу достичь, посмотрев на trello.

Я с нетерпением жду ваших идей! Благодаря

Edit: Вот код

<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

Если вы даете card-deckdisplay: inline-flex; flex-wrap: nowrap; они будут оставаться на одной линии

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