如何使 bootstrap 卡片的容器水平拉伸？

Question

我正在玩 bootstrap 4 张牌。 (https://v4-alpha.getbootstrap.com/components/card/)

我有一个容器，里面有一张卡片桌。只要我在里面插入新卡片，我希望我的容器水平伸展（水平滚动条应该在某个时刻出现）。

默认情况下，当我的容器宽度大于屏幕宽度时会中断。 bootstrap 在剩余卡片旁边创建第二行。

你可以通过查看 trello 了解我想要实现的目标。

我期待着阅读您的想法！谢谢

编辑：这是代码

<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-deck 一个 display: 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>

如何使 bootstrap 卡片的容器水平拉伸？

How to make bootstrap cards' container stretch horizontally?

css

flexbox

twitter-bootstrap-4