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

Posted 2023-03-05

【中文标题】基于视口响应的 Bootstrap 4 卡片组表格单元列？

【英文标题】：Bootstrap 4 card deck table-cell columns responsive based on viewport?

【发布时间】：2016-07-28 23:54:52

【问题描述】：

所以在 Bootstrap v4 中，我看到卡片组 (http://v4-alpha.getbootstrap.com/components/card/#decks) 有一个新功能，它可以制作一组卡片，它们的高度根据组中最高的内容相等。

似乎列数取决于组中有多少个card-div。有没有办法根据视口改变列数？比如大宽4列/卡宽，中宽2宽，小宽1？

目前，它们的列数/卡片宽度保持不变，直到小于 544 像素。在 544 像素或更高时，它们具有 display: table-cell 和 screen (min-width: 544px) 规则。

有没有办法通过仅更改 CSS 来根据视口使卡片具有不同数量的列？

编辑 - 由于 IE 支持，希望不使用 flex / flexbox

http://codepen.io/jpost-vlocity/full/PNEKKy/ 处 4 列/卡宽和 3 列/卡宽的 Codepen 示例

【参考方案1】：

给你， 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 - 您可以使用 polyfill github.com/10up/flexibility 或者您可以创建自己的组件，该组件不依赖于 flex，而是使用浮点数。另请查看此后备解决方案，它可能会有所帮助css-tricks.com/forums/topic/flexbox-with-fallback

只是一点，Bootstrap 和 Flexbox - 关于对 IE 的支持 v4-alpha.getbootstrap.com/getting-started/flexbox

【参考方案2】：

2019 年更新

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

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

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

另外，img-responsive 已更改为 img-fluid

引导程序 4.0.0

Flexbox 现在是默认设置，但仍然没有支持的方式来制作响应式卡片组。推荐的方式是在网格内使用卡片：

Responsive cards using grid

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

例如：xl 上 5，lg 上 4，md 上 3，sm 上 2，等等。

Responsive card deck demo (4.0.0)Responsive card deck demo (alpha 6)CSS pseudo elements variation

【讨论】：

有没有办法在没有 flex / flexbox 的情况下做到这一点？当然对于 IE 支持

使用网格的响应式卡片的链接不太有效。它假定文本长度相同，并且所有卡片的标题长度相同。如果您添加更多文本 - 它会变平。很好的尝试。

@WindUpLordVexxos 它工作正常。如果您关心的是等高卡片，只需在卡片上使用h-100。 codeply.com/go/AeCiHRF7gx

【参考方案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 card deck responsive

【参考方案4】：

我发现了一个使用 css-grid 的非常简单的解决方法。您可以调整 250px 以适合您的用例。

.card-deck 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;

【讨论】：

用它来正确显示无限数量的卡片，比 reactstrap CardDesk 好得多。惊人的。 :)

对于我的情况，我使用自动填充而不是自动适应，因为卡片的数量从 1 到 100 不等，如果卡片数低于 5，卡片之间的间隙会增加以适应父 div .

非常优雅的方法

【参考方案5】：

只需将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>

【讨论】：

这是关键！摆脱纸牌类，用排代替。将 h-100 添加到卡类。一定要在卡片上添加一个“mb-3”或更多的类，以便有一些间距。这将在任何指定的视口上中断。 :D

【参考方案6】：

试试这个

<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 responsive card-deck