CSS Bootstrap 中可水平滚动的卡片列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35993300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontally scrollable list of cards in Bootstrap
提问by Lukas
I am trying to create a horizontal list of cards where 3 cards are shown at a time and the other ones are horizontally scrollable, like this:
我正在尝试创建一个卡片的水平列表，其中一次显示 3 张卡片，其他卡片可水平滚动，如下所示：
This can be done with CSS pretty easily, but I want to do this using Bootstrap. Bootstrap 4 ships with cardsas popularized by material design and they are as easy to use as anything else in Bootstrap. For this example instead of cards it could also be regular divs.
这可以通过 CSS 轻松完成，但我想使用 Bootstrap 来完成。Bootstrap 4 附带了由 Material Design 流行的卡片，它们与 Bootstrap 中的其他任何东西一样易于使用。对于这个例子，它也可以是普通div的，而不是卡片。
The thing I am struggling with is creating a scrollable container of X cards (or divs) where 3 of them are shown at a time and the others overflow to the right and are scrollable. I am not sure how to use Bootstrap give the cards (or divs) a width so that 3 are shown at a time and the other ones lie next to them on the right.
我正在努力创建一个 X 卡（或 div）的可滚动容器，其中一次显示 3 个，而其他的则向右溢出并且可滚动。我不确定如何使用 Bootstrap 给卡片（或 div）一个宽度，以便一次显示 3 个，而其他的则位于右侧。
回答by Zim
Now that Bootstrap 4 Alpha 6 uses flexbox, this horizontal scrolling layout is much easier. You can simply use flex-rowand flex-nowrap:
既然 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
https://www.codeply.com/go/GoFQqQAFhN
Update 2019 Bootstrap 4.3+
更新 2019 Bootstrap 4.3+
The above method still works, or you can use the flexbox utils in the container of the cards: https://www.codeply.com/go/PF4APyGj7F
上述方法仍然有效，或者您可以使用卡片容器中的 flexbox utils：https://www.codeply.com/go/PF4APyGj7F
回答by Mohamed Zezo
You can use bootstrap-horizon
您可以使用bootstrap-horizon
Installation
安装
Include bootstrap-horizon.css after bootstrap.css
在 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">
Add the .row-horizonclass to .rowsthat require horizontal scrolling. In order to improve the UX, bootstrap-horizon overrides bootstrap's .col-*-*classes to make the baseline width 90% instead of 100% which allows for a small portion of the last column to be displayed.
添加需要水平滚动的.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>
Example
例子
回答by Malcolm
Bootstap 4.3
Scss file
Bootstap 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 file
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>
Since you are implementing a horizontal scroll I am sure that all the cards have to be the same for all the cards thus @extend .card-deck;this will ensure all the cards are the same height.
由于您正在实施水平滚动，我确信所有卡片的所有卡片都必须相同，因此@extend .card-deck;这将确保所有卡片的高度相同。
回答by ikonuk
The most effective solution would be as shown below. Alongside the flex-nowrapyou need to set the overflowattribute to prevent the whole page expanding.
最有效的解决方案如下所示。除了flex-nowrap您需要设置overflow属性以防止整个页面扩展。
With overflowproperty:
随着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>Without overflowproperty:
无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>