Bootstrap 中可水平滾動的卡片列表

Question

我正在嘗試創建一個水平卡片列表，其中一次顯示 3 張卡片，其他卡片可水平滾動，如下所示：

這可以很容易地用 CSS 完成，但我想用 Bootstrap 來完成。 Bootstrap 4 隨附了因材料設計而流行的卡片，它們與 Bootstrap 中的其他任何東西一樣易於使用。 對於此示例，它也可以是常規的div而不是卡片。

我正在努力解決的問題是創建一個可滾動的 X 卡（或 div）容器，其中一次顯示其中 3 個，其他的溢出到右側並且可以滾動。 我不確定如何使用 Bootstrap 為卡片（或 div）設置寬度，以便一次顯示 3 個，而其他卡片位於右側。

Answer 1

既然 Bootstrap 4 Alpha 6 使用了 flexbox，這種水平滾動布局就容易多了。 您可以簡單地使用flex-row和flex-nowrap ：

<div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        ...
    </div>
</div>

https://www.codeply.com/go/GoFQqQAFhN

更新 2019 Bootstrap 4.3+

上述方法仍然有效，或者您可以使用卡片容器中的 flexbox utils： https ://www.codeply.com/go/PF4APyGj7F

Answer 2

最有效的解決方案如下所示。 除了flex-nowrap您還需要設置overflow屬性以防止整個頁面展開。

帶有overflow屬性：

 <!-- CSS only --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <h6>Bootstrap 4 horizontally scrollable card groups</h6> <div class="d-flex flex-row flex-nowrap overflow-auto"> <div class="card card-block mx-2" style="min-width: 300px;">Card</div> <div class="card card-block mx-2" style="min-width: 300px;">Card</div> <div class="card card-block mx-2" style="min-width: 300px;">Card</div> </div>

沒有overflow屬性：

 <!-- CSS only --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <h6>Bootstrap 4 horizontally scrollable card groups</h6> <div class="d-flex flex-row flex-nowrap"> <div class="card card-block mx-2" style="min-width: 300px;">Card</div> <div class="card card-block mx-2" style="min-width: 300px;">Card</div> <div class="card card-block mx-2" style="min-width: 300px;">Card</div> </div>

Answer 3

您可以使用bootstrap-horizo​​n

安裝

在 bootstrap.css 之后包含 bootstrap-horizo​​n.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">

將.row-horizon類添加到需要水平滾動的.rows 。 為了改善用戶體驗，bootstrap-horizo​​n 覆蓋了 bootstrap 的.col-*-*類，使基線寬度為 90% 而不是 100%，這允許顯示最后一列的一小部分。

<div class="row row-horizon">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    ...
  </div>
</div>

例子

Answer 4

引導程序 4.3
.css 文件

.card-deck-scrollable{
  @extend .card-deck;
  flex-direction: row;

  & > .card{
    @extend .mx-3;
    flex: 0 0 40% !important;/*Change to any size you want*/
    max-width: 40%;
  }
}

html文件

<div class="card-deck-scrollable flex-nowrap overflow-auto">
  <div class="card">
    <div class="card-body">
      <div class="card-title">Name</div>
    </div>
  </div>
</div>

由於您正在實施水平滾動，我確信所有卡片的所有卡片都必須相同，因此@extend .card-deck; 這將確保所有卡片的高度相同。

Answer 5

要添加到@ikonuk 的答案，如果您有一個使用列的布局，並且想在每張卡片都有最小長度的列中添加一個水平滾動的卡片列表，您可能會發現“容器”列超出了網格當您通過拖動調整瀏覽器大小時系統 window，當您使用

style: min-width: 300px // (or any other value in pixels)

設置卡片的最小寬度。

為了不讓列中斷，只需為每張卡片的最小寬度使用一個百分比值，或者使用引導程序的w-xx類來設置每張卡片的百分比。

（這可能也適用於 bootstrap 5，但還沒有測試過，因為目前在一個使用 bootstrap 4 的項目中偶然發現了這個）