Question

我正在使用Bootstrap 4，我找不到一个解决方案，可以在div class="card-columns" class="col-md-3 col-sm-6 col-xs-12"中添加对卡的响应能力（此类对内部的卡应用类似砌体的效果这个班的div。）。

在Bootstrap 3中， easy 可以设置样式并使“卡片”响应，因为可以将thumbnail之类的内容应用于包含caption，{{1}的div等等。

如何在Bootstrap 4中使用卡片时产生相同的效果？

这是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

Bootstrap 4（4.0.0-alpha.2）使用column-count类中的css属性card-columns来定义在div元素内显示的卡列数。
但是这个属性只有两个值：

小屏幕（max-width: 34em）

1

所有其他尺寸（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

更新2018 - 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 3

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

HTML

list-group-item

CSS / SCSS

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

链接：-https://codepen.io/anjanasilva/pen/JmdOpb

Answer 4

如果您使用的是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 5

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

对于一个最近很大程度上依赖于卡片布局UI的项目，我已经重新使用Bootstrap。我发现通过标准断点实现以下实现成功：

<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卡布局类并在标准断点上获得最好结果的情况下，我终于决定尝试.card-columns类。而且有效！

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

Answer 6

另一个较晚的答案，但是我一直在研究这个问题，并提出了一个通用的Sass解决方案，我发现它很有用，许多其他解决方案也可能有用。作为概述，本文引入了新类，它们可以以与带有.card-columns或.col-4的列非常相似的方式修改.col-lg-3元素的列数：

@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 - 卡列中的响应卡

6 个答案: