logo标签列表

基于视口响应的Bootstrap 4卡片堆叠表格单元列？

csstwitter-bootstrapresponsive-designtwitter-bootstrap-4bootstrap-4
15

在Bootstrap v4中，我看到了一个新功能：卡片组（http://v4-alpha.getbootstrap.com/components/card/#decks），可以将一组卡片的高度设置为最高内容相等。

似乎列数是基于卡片div组中的数量确定的。是否有方法使列数根据视口大小更改？例如，在大屏幕上4列/卡片宽度，中型屏幕上2列/卡片宽度，在小型屏幕上1列/卡片宽度。

目前，它们保持相同的列数/卡片宽度，直到小于544px。在544px及以上的屏幕上，它们具有 display: table-cell 和 screen(min-width: 544px) 规则。

是否有方法通过仅更改CSS使卡片在不同的视口下具有不同的列数？

编辑 - 不使用flex / flexbox以支持IE浏览器。

在http://codepen.io/jpost-vlocity/full/PNEKKy/中有一个4列/卡片宽度和3列/卡片宽度的示例。

6个回答
34

我找到了一种相当简单的解决方案，可以使用css-grid。您可以根据需要微调250px。

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}
使用此代码可以正确地显示无限数量的卡片，比如用reactstrap CardDesk要好得多。太棒了。 :) - Vadorequest
1
对于我的情况，我使用自动填充而不是自动适应，因为卡片数量从1到100不等，如果卡片计数低于5，则卡片之间的间隙会增加以适应父div。 - Sharon
非常优雅的方法 - Rodolfo Jorge Nemer Nogueira
15

更新 2019

使用card-deck很难设置卡片的宽度（响应式），因为它使用display:table-cell和width:1%。

我发现使用放置在Bootstap网格col-*内的卡片更容易使它们响应式，然后您可以使用网格视口断点。如果您希望卡片高度相同，则启用Bootstrap的flexbox，就像card-deck一样。

http://www.codeply.com/go/6eqGPn3Qud

img-responsive已更改为img-fluid

Bootstrap 4.0.0

Flexbox现在是默认值，但仍然没有一种支持的方法使得card-deck响应式。推荐的方法是在网格中使用卡片：

使用网格进行响应式卡片

另一种制作响应式card-deck的方法是每x列使用响应式重置div。这将强制卡片在特定断点处换行。

例如：在xl上为5，在lg上为4，在md上为3，在sm上为2，等等...

响应式卡片堆演示（4.0.0）
响应式卡片堆演示（alpha 6）
CSS伪元素变体

有没有一种方法可以在不使用flex / flexbox的情况下完成它？当然要支持IE。 - jpostdesign
使用网格布局的响应式卡片链接并不完全有效。它假定文本长度相等，并且标题长度对于所有卡片都相同。如果您添加更多文本，则会失效。尽管如此，还是很不错的尝试。 - Micheal J. Roberts
@WindUpLordVexxos，它运行良好。如果您关心的是等高卡片，请在卡片上使用h-100。http://www.codeply.com/go/AeCiHRF7gx - Carol Skelly
6

在网格中的卡片上简单地添加 h-100 类。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-sm-6 my-3">
    <div class="card h-100">
      <!-- full height -->
      <div class="card-header">Header 1</div>
      <div class="card-body">Body 1</div>
      <div class="card-footer">Footer 1</div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100">
      <!-- full height -->
      <div class="card-header">Header 2</div>
      <div class="card-body">Body 2 <br> 2a <br> 2b <br> 2c</div>
      <div class="card-footer">Footer 2</div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100">
      <!-- full height -->
      <div class="card-header">Header 3 <br> 3a</div>
      <div class="card-body">Body 3</div>
      <div class="card-footer">Footer 3 <br> 3a </div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100">
      <!-- full height -->
      <div class="card-header">Header 2</div>
      <div class="card-body">Body 2 <br> 2a <br> 2b <br> 2c</div>
      <div class="card-footer">Footer 2</div>
    </div>
  </div>
</div>

这很关键！去掉card-deck类，用row替换。将h-100添加到card类中。确保还要为卡片添加“mb-3”或更多的类，以便有一些间距。这将在任何分配的视口上中断。 :D - ben.kaminski
4

这是你需要的链接： http://codepen.io/KarlDoyle/pen/pypWbR

主要的问题在于你需要覆盖样式，就像下面展示的那样。

.card-deck {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap; 
  align-items: stretch;
}
.card-deck .card {
  display: block;
  flex-basis: 33.3%; /* change this value for each breakpoint*/
}
有没有一种不使用flex / flexbox的方法？当然要支持IE。 - jpostdesign
1
@jpostdesign - 你可以使用一个 polyfill https://github.com/10up/flexibility 或者创建自己的组件，不依赖于 flex，而是使用浮动。同时，也可以查看这个备用方案 https://css-tricks.com/forums/topic/flexbox-with-fallback/，可能会有所帮助。 - Karl Doyle
只是提醒一下，关于IE的支持，Bootstrap和Flexbox的情况，请参考http://v4-alpha.getbootstrap.com/getting-started/flexbox/。 - Karl Doyle
3
Bootstrap 4 卡片堆响应式
我尝试使用 <container>、<row> 和 <col> 来使其响应式，但这样会失去卡片堆的同一高度特性。你需要的是 CSS：
.card-deck {
  margin: 0 -15px;
  justify-content: space-between;
}

.card-deck .card {
  margin: 0 0 1rem;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card-deck .card {
    -ms-flex: 0 0 48.7%;
    flex: 0 0 48.7%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-deck .card {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
  }
}

@media (min-width: 992px)
{
  .card-deck .card {
    -ms-flex: 0 0 24%;
    flex: 0 0 24%;
  }
}

这是我的CodePen链接： Bootstrap 4卡片组响应式
1

试试这个

<div class="container">
    <div class="card-deck">
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
    </div>
</div>


// Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
        }
    }
}

在CodePen上演示Bootstrap 4响应式卡片组

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接