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>

如何制作自举卡＆＃39;容器水平拉伸？

1 个答案: