Bootstrap中可水平滚动的卡片列表

jw5wzhpr 于 8个月前发布在 Bootstrap

关注(0)|答案(6)|浏览(106)

我试图创建一个横向的卡片列表，其中一次显示3张卡片，其他卡片可以横向滚动，就像这样：

这可以用CSS很容易地完成，但我想用Bootstrap来做。Bootstrap 4 ships with cards通过材质设计而普及，它们和Bootstrap中的其他东西一样易于使用。在这个例子中，它也可以是常规的div s，而不是卡片。
我正在努力的事情是创建一个X卡（或div）的可滚动容器，其中3个卡一次显示，其他卡向右溢出并可滚动。我不知道如何使用Bootstrap给给予卡片（或div）一个宽度，这样一次显示3张，其他的就在它们旁边的右边。

twitter-bootstrap

来源：https://stackoverflow.com/questions/35993300/horizontally-scrollable-list-of-cards-in-bootstrap

6条答案

按热度按时间

zmeyuzjn1#

更新2021 Bootstrap 5
flexbox utils仍然存在于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

Original Answer 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>

https://codeply.com/go/GoFQqQAFhN

赞(0）回复(0）举报 7个月前

0yycz8jy2#

最有效的解决方案如下所示。除了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>

赞(0）回复(0）举报 7个月前

yiytaume3#

可以使用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>

示例

赞(0）回复(0）举报 7个月前

u2nhd7ah4#

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文件

<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;这将确保所有的卡是相同的高度。

赞(0）回复(0）举报 7个月前

ykejflvf5#

为了补充@ikonuk的答案，如果你有一个使用列的布局，并希望在每个卡片都有最小长度的列中添加一个可水平滚动的卡片列表，你可能会发现，当你通过拖动来调整浏览器窗口时，“容器”列会从网格系统中分裂出来，当你使用

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

设置卡片的最小宽度。
为了避免列被打断，只需为每张卡片的最小宽度使用一个百分比值，或者使用bootstrap的w-xx类来设置每张卡片的百分比。
(this可能也适用于bootstrap 5，但还没有测试过，因为目前在一个使用bootstrap 4的项目中偶然发现了这一点）

赞(0）回复(0）举报 7个月前

qybjjes16#

网址：

<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;
}

现在你可以通过shift+wheel滚动

赞(0）回复(0）举报 7个月前

我来回答

Bootstrap中可水平滚动的卡片列表

6条答案

相关问题

热门标签

最新问答