Bootstrap 4 - 卡片列中的响应卡片

Question

我正在玩 Bootstrap 4，但我找不到在 div 和 class="card-columns" 中增加卡片响应的解决方案（这个 class对具有此 class).

的 div 内的卡片应用类似砌体的效果

在 Bootstrap 3 中，很容易 设置样式并使“卡片”具有响应性，因为可以将 class="col-md-3 col-sm-6 col-xs-12" 之类的东西应用到 div包含thumbnail、caption等

如何在Bootstrap4中使用卡牌达到同样的效果？

这里是 HTML:

<body>

<div class="container-fluid">
    <div class="row">

        <div class="col-md-4 hidden-sm-down" id="map_container">
            <p>here we put the map</p>
        </div>

        <div class="col-md-8 col-sm-12 right_box">

            <div class="row">

                // here there's code for navbar

            </div><!-- row -->

            <div class=row">
                <div class="card-columns">
                    <?php
                    // Create and check connection
                    
                    if ($result->num_rows > 0) {

                        // output card design
                        while($row = $result->fetch_assoc()) {

                            echo '<div class="card">
                                    <img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '">
                                    <div class="card-block">
                                        <h4 class="card-title">' . $row["name"] . '</h4>
                                        <p class="card-text">Text. Card content.</p>
                                    </div>
                                    <div class="card-footer text-muted">
                                        <ul class="list-inline">
                                            <li><i class="fa fa-user"></i></li>
                                            <li>14</li>
                                        </ul>
                                    </div>
                                  </div><!-- card -->';
                        }
                    } else {
                        echo "0 results";
                    }

                    $conn->close();
                    ?>
                </div><!-- container card-columns -->
            </div><!-- row -->
        </div><!-- col-md-8 right_box -->
    </div><!-- row -->
</div><!-- container-fluid -->
</body>

这是我用过的CSS：

#map_container {
background-image: url(map.png);
height: 100vh;
}

.right_box {
-webkit-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
}

.card {
border-radius: 0 !important;
border: 0 none;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
margin-left: 1px;
margin-right: 1px;
}

.card-img-top {
width: 100%;
border-radius: 0 !important;
}

.card-columns {
padding-top: 15px;
}

为了让我的情况更清楚，下面给出了两张图片：

Large screen

Smaller screen

我希望卡片在较小的屏幕上垂直堆叠。

感谢您的建议！

Answer 1

Bootstrap4(4.0.0-alpha.2)使用css属性column-count中的card-columnsclass来定义在 div 元素内显示多少列卡片。
但是这个属性只有两个值：

小屏幕默认值1(max-width: 34em)
所有其他尺寸 (min-width: 34em)

3

bootstrap.min.css 中的实现方式如下：

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        ⋮
    }
    ⋮
}

要使卡片堆叠响应，您可以将以下媒体查询添加到您的 css 文件并根据您的需要修改 min-width 的值要求：

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 48em) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 62em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 75em) {
    .card-columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

Answer 2

如果您正在使用 Sass:

$card-column-sizes: (
    xs: 2,
    sm: 3,
    md: 4,
    lg: 5,
);

@each $breakpoint-size, $column-count in $card-column-sizes {
    @include media-breakpoint-up($breakpoint-size) {
      .card-columns {
        column-count: $column-count;
        column-gap: 1.25rem;

        .card {
          display: inline-block;
          width: 100%; // Don't let them exceed the column width
        }
      }
    }
}

Answer 3

2019 年更新 - Bootstrap 4

您可以简单地使用 SASS mixin 来更改每个断点/网格层中的卡片数量。

.card-columns {
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
}

SASS 演示：http://www.codeply.com/go/FPBCQ7sOjX

或者，CSS只这样...

@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 5;
    }
}

CSS-仅演示：https://www.codeply.com/go/FIqYTyyWWZ

Answer 4

我创建了一个卡片布局 - 使用 Bootstrap 4 / CSS3 连续 3 张卡片（当然它是响应式的）。以下示例使用基本 Bootstrap 4 类，例如 container、row、col-x、list-group 和 list-group-item。如果有人对这种布局感兴趣，想在这里分享。

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4">
      <div class="custom-column">
        <div class="custom-column-header">Header</div>
        <div class="custom-column-content">
          <ul class="list-group">
            <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
          </ul>
        </div>
        <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="custom-column">        
        <div class="custom-column-header">Header</div>
        <div class="custom-column-content">
          <ul class="list-group">
            <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
          </ul>
        </div>
        <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="custom-column">
        <div class="custom-column-header">Header</div>
        <div class="custom-column-content">
          <ul class="list-group">
            <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li>
          </ul>
        </div>
        <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div>
      </div>
    </div>
  </div>
</div>

CSS / SCSS

$primary-color: #ccc;
$col-bg-color: #eee;
$col-footer-bg-color: #eee;
$col-header-bg-color: #007bff;
$col-content-bg-color: #fff;

body {
  background-color: $primary-color;
}  

.custom-column {  
  background-color: $col-bg-color;
  border: 5px solid $col-bg-color;    
  padding: 10px;
  box-sizing: border-box;  
}

.custom-column-header {
  font-size: 24px;
  background-color: #007bff;  
  color: white;
  padding: 15px;  
  text-align: center;
}

.custom-column-content {
  background-color: $col-content-bg-color;
  border: 2px solid white;  
  padding: 20px;  
}

.custom-column-footer {
  background-color: $col-footer-bg-color;   
  padding-top: 20px;
  text-align: center;
}

Link :- https://codepen.io/anjanasilva/pen/JmdOpb

Answer 5

我知道这个问题是不久前发布的；尽管如此，Bootstrap v4.0 具有开箱即用的卡片布局支持。您可以在此处找到文档：Bootstrap Card Layouts。

我已经重新开始使用 Bootstrap 进行一个严重依赖卡片布局 UI 的近期项目。我发现跨标准断点的以下实现取得了成功：

<link href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center" id="cars" v-cloak>
    <!-- RELEVANT MARKUP BEGINS HERE -->
    <div class="container mh0 w-100">
        <div class="page-header text-center mb5">
            <h1 class="avenir text-primary mb-0">Cars</h1>
            <p class="text-secondary">Add and manage your cars for sale.</p>
            <div class="header-button">
                <button class="btn btn-outline-primary" @click="clickOpenAddCarModalButton">Add a car for sale</button>
            </div>
        </div>
        <div class="container pa0 flex justify-center">
            <div class="listings card-columns">
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
                <div class="card mv2">
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"
                        alt="Mazda hatchback">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                    <div class="card-footer">
                        buttons here
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在尝试了 Bootstrap .card-group 和 .card-deck 卡片布局 classes 后，在标准断点上充其量只是古怪的结果，我最终决定给 [= =13=] class 一枪。它奏效了！

您的结果可能会有所不同，但 .card-columns 似乎是此处最稳定的实施。

Answer 6

另一个迟到的答案，但我正在研究这个问题并想出了一个通用的 Sass 解决方案，我发现它很有用，许多其他人也可能会这样做。为了给出一个概述，这引入了新的类，它可以以与 .col-4 或 .col-lg-3 的列非常相似的方式修改 .card-columns 元素的列数：

@import "bootstrap";

$card-column-counts: 1, 2, 3, 4, 5;

.card-columns {
    @each $column-count in $card-column-counts {
        &.card-columns-#{$column-count} {
            column-count: $column-count;
        }
    }

    @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
            @each $column-count in $card-column-counts {
                &.card-columns#{$infix}-#{$column-count} {
                    column-count: $column-count;
                }
            }
        }
    }
}

最终结果是如果您有以下情况：

<div class="card-columns card-columns-2 card-columns-md-3 card-columns-xl-4">
   ...
</div>

那么默认情况下您将有 2 列，中型设备为 3 列，xl 设备为 4 列。此外，如果您更改网格断点，这将自动支持这些断点，并且可以覆盖 $card-column-counts 以更改允许的列数。

Bootstrap 4 - 卡片列中的响应卡片

Bootstrap 4 - Responsive cards in card-columns

html

css

twitter-bootstrap

bootstrap-4