我正在尝试创建一个水平卡片列表,其中一次显示 3 张卡片,其他卡片可水平滚动,如下所示:
这可以使用 CSS 轻松完成,但我想使用 Bootstrap 来完成。 Bootstrap 4 附带卡片,这些卡片因材料设计而流行,并且它们与 Bootstrap 中的其他任何东西一样易于使用。在这个例子中,除了卡片之外,它也可以是常规的
div
s。
我正在努力解决的问题是创建一个可滚动的 X 卡(或 div)容器,其中一次显示 3 个卡,其他卡溢出到右侧并且可滚动。我不知道如何使用 Bootstrap 给卡片(或 div)一个宽度,以便一次显示 3 个,其他卡片位于它们旁边的右侧。
更新 2021 Bootstrap 5
Flexbox 实用程序仍然存在于 Bootstrap 5 中:https://codeply.com/p/Vo13PAGO7e
<div class="container-fluid py-2">
<h2 class="font-weight-light">Bootstrap 5 Horizontal Scrolling Cards with Flexbox</h2>
<div class="d-flex flex-row flex-nowrap">
<div class="card card-body">Card</div>
<div class="card card-body">Card</div>
<div class="card card-body">Card</div>
...
</div>
</div>
更新2019 Bootstrap 4.3+
flexbox方法仍然有效,因此您可以在卡片容器中使用flexbox utils:https://codeply.com/go/PF4APyGj7F
原始答案 Bootstrap 4 alpha
现在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>
最有效的解决方案如下所示。除了
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>
您可以使用bootstrap-horizon
安装
在 bootstrap.css 之后包含 bootstrap-horizon.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-horizon 覆盖了 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>
示例
引导4.3
SCSS 文件
.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;
这将确保所有卡片的高度相同。
要添加到@ikonuk的答案,如果您有一个使用列的布局,并且想要在每张卡具有最小长度的列中添加水平可滚动的卡列表,您可能会发现“容器”列超出了当您通过拖动调整浏览器窗口大小时,当您使用网格系统时
style: min-width: 300px // (or any other value in pixels)
设置卡片的最小宽度。
为了不让列断裂,只需使用百分比值作为每张卡的最小宽度,或使用bootstrap的
w-xx
类来设置每张卡的百分比。
(这也可能适用于 bootstrap 5,但尚未测试它,因为目前在使用 bootstrap 4 的项目中偶然发现了这一点)
html:
<div class="d-flex ms-lg-5 scro mb-3 "
style="max-height: 320px;max-width: 100%;overflow-y: hidden; overflow-x: scroll;scrollbar-width: none;-ms-overflow-style: none;">
<div class="card " style="min-width: 150px;" name="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text" style="text-overflow: ellipsis;overflow: hidden;width: 140px;height: 1.2em;white-space: nowrap;">title</p>
</div>
</div>
CSS:
.scro::-webkit-scrollbar {
display: none;
}