Question

我正在尝试创建一个水平的卡片列表，其中一次显示3张卡片，其他卡片可水平滚动，如下所示：

这可以很容易地使用CSS完成，但我想使用Bootstrap来做到这一点。 Bootstrap 4 ships with cards由材料设计推广，它们与Bootstrap中的任何其他东西一样易于使用。对于此示例而不是卡片，它也可以是常规div s。

我正在努力的事情是创建一个可滚动的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

更新2018 Bootstrap 4.0.0

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

Answer 2

您可以使用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。为了改进UX，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>

示例

Answer 3

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

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

Bootstrap中可水平滚动的卡列表

4 个答案: