CSS Bootstrap 4 卡片组，列数基于视口

Question

提问by ganders

I'm trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height.

我正在尝试在引导程序 4 中实现卡片组功能，以使我的所有卡片具有相同的高度。

The examples that bootstrap provides show 4 nice cards, but it's 4 cards on the row, no matter the viewport. See the codeply here.

bootstrap 提供的示例显示了 4 张漂亮的卡片，但无论视口如何，它都是 4 张卡片。请参阅此处的代码。

This doesn't make sense to me since, I would assume, that you'd want a minimum size for your card to shrink to in order for your content to still look good.

这对我来说没有意义，因为我假设您希望卡片的最小尺寸缩小到您的内容仍然看起来不错。

I then tried adding in some viewport classes to break on screen sizes, but as soon as that div gets added, the card-deck doesn't apply anymore, thus not making the cards equal height.

然后我尝试添加一些视口类以打破屏幕尺寸，但是一旦添加了该 div，卡片组就不再适用，因此不会使卡片等高。

How can I get this accomplished? Is this a missing feature that will be addressed in the full release of Bootstrap 4?

我怎样才能做到这一点？这是一个缺失的功能，将在 Bootstrap 4 的完整版本中解决吗？

Here's the fiddle: https://jsfiddle.net/crrm5q9m/

这是小提琴：https: //jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
        <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>

Answer 1

回答by Zim

Updated 2018

2018 年更新

If you want a responsive card-deck, use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)...

如果您想要一个响应式卡片组，请使用可见性实用程序在不同的视口宽度（断点）上强制换行每 X 列...

Bootstrap 4 responsive card-deck(v 4.1)

Bootstrap 4 响应式卡片组(v 4.1)

Original answer for Bootstrap 4 alpha 2:

Bootstrap 4 alpha 2 的原始答案：

You can use the grid col-*-*to get the different widths(instead of card-deck) and then set equal height to the cols using flexbox.

您可以使用网格col-*-*来获得不同的宽度（而不是卡片组），然后使用 flexbox 为列设置相等的高度。

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2(alpha 2)

http://codeply.com/go/O0KdSG2YX2（alpha2）

The problem is that w/o flexbox enabled the card-deckuses table-cellwhere it becomes very hard to control the width. As of Bootstrap 4 Alpha 6, flexbox is default so the additional CSS is not required for flexbox, and the h-100class can be used to make the cards full height: http://www.codeply.com/go/gnOzxd4Spk

问题是没有 flexbox 启用了card-deck使用table-cell它变得非常难以控制宽度的地方。从 Bootstrap 4 Alpha 6 开始，flexbox 是默认设置，因此 flexbox 不需要额外的 CSS，并且h-100该类可用于使卡片全高：http: //www.codeply.com/go/gnOzxd4Spk

Related question:Bootstrap 4 - Responsive cards in card-columns

相关问题：Bootstrap 4 - 卡片列中的响应卡片

Answer 2

回答by migli

Here's a solution with Sass to configure the number of cards per line depending on breakpoints: https://codepen.io/migli/pen/OQVRMw

这是一个使用 Sass 根据断点配置每行卡数的解决方案：https: //codepen.io/migli/pen/OQVRMw

It works fine with Bootstrap 4 beta 3

它适用于 Bootstrap 4 beta 3

// 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});
        }
    }
}

EDIT (2019/10)

编辑 (2019/10)

I worked on another solution which uses horizontal lists group + flex utilitiesinstead of card-deck:

我研究了另一个使用水平列表组 + flex 实用程序而不是卡片组的解决方案：

https://codepen.io/migli/pen/gOOmYLb

It's an easy solution to organize any kind of elements into responsive grid

将任何类型的元素组织到响应式网格中是一个简单的解决方案

<div class="container">
    <ul class="list-group list-group-horizontal align-items-stretch flex-wrap">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <!--= add as many items as you need  =-->
    </ul>
</div>

.list-group-item {
    width: 95%;
    margin: 1% !important;
}

@media (min-width: 576px) {
    .list-group-item {
        width: 47%;
        margin: 5px 1.5% !important;
    }
}

@media (min-width: 768px) {
    .list-group-item {
        width: 31.333%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 992px) {
    .list-group-item {
        width: 23%;
        margin: 5px 1% !important;
    }
}

@media (min-width: 1200px) {
    .list-group-item {
        width: 19%;
        margin: 5px .5% !important;
    }
}

Answer 3

回答by Spanomaly

I got this to work by adding a min-widthto the cards:

我通过min-width在卡片中添加 a来实现这一点：

<div class="card mb-3" style="min-width: 18rem;">
  <p>Card content</p>
</div>

The cards don't go below this width, but still properly fill each row and have equal heights.

卡片不会低于此宽度，但仍会正确填充每一行并具有相同的高度。

Answer 4

回答by Mohammad Ayoub Khan

<div class="w-100 d-lg-none mt-4"></div>

I created 4 cards and place this code between second and third card, try this.

我创建了 4 张卡片并将此代码放在第二张和第三张卡片之间，试试这个。

Answer 5

回答by bluegrounds

I've used CSS Grid to fix that. CSS Grid will make all the elements in the same row, all the same height.

我已经使用 CSS Grid 来解决这个问题。CSS Grid 将使所有元素在同一行中，所有元素都具有相同的高度。

I haven't looked into making all the elements in all the rows the same height though.

不过，我还没有考虑使所有行中的所有元素都具有相同的高度。

Anyway, here's how it can be done:

无论如何，这是如何做到的：

HTML:

HTML：

<div class="grid-container">

  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS:

CSS：

.grid-container {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Here's a complete JSFiddle. https://jsfiddle.net/bluegrounds/owjvhstq/4/

这是一个完整的 JSFiddle。 https://jsfiddle.net/bluegrounds/owjvhstq/4/

Answer 6

回答by Ramesh Navi

This answer is for those who are using Bootstrap 4.1+ and for those who care about IE 11 as well

这个答案适用于那些使用 Bootstrap 4.1+ 的人以及那些关心 IE 11 的人

Card-deck does not adapt the number visible of cards according to the viewport size.

Card-deck 不会根据视口大小调整可见的卡片数量。

Above methods work but do not support IE. With the below method, you can achieve similar functionality and responsive cards.

以上方法有效，但不支持IE。使用以下方法，您可以实现类似的功能和响应式卡片。

You can manage the number of cards to show/hide in different breakpoints.

您可以管理要在不同断点中显示/隐藏的卡片数量。

In Bootstrap 4.1+ columns are same height by default, just make sure your card/content uses all available space. Run the snippet, you'll understand

默认情况下，Bootstrap 4.1+ 列的高度相同，只需确保您的卡片/内容使用所有可用空间。运行代码段，你就会明白

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">

                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 7

回答by edsandorf

@Zim provided a great solution above (well deserved up-vote from me), however, it didn't quite fit what I needed since I was implementing this in Jekyll and wanted my card deck to automatically update every time I added a post to my site. Growing a card deck such as this with each new post is straight forward in Jekyll, the challenge was to correctly place the breakpoints. My solution make use of additional liquid tags and modulo mathematics.

@Zim 上面提供了一个很好的解决方案（当之无愧的我的投票），但是，它不太适合我的需要，因为我在 Jekyll 中实现了这个，并且希望我的卡片组在每次我添加帖子时自动更新我的网站。在 Jekyll 中，随着每个新帖子的增长，这样的卡片组是直接的，挑战是正确放置断点。我的解决方案利用了额外的液体标签和模数学。

While this question is old, I came across it and found it useful, and maybe someday someone will come along wanting to do this with Jekyll.

虽然这个问题很老，但我遇到了它并发现它很有用，也许有一天有人会想用 Jekyll 来做这个。

<div class = "container">
  <div class = "card-deck">

    {% for post in site.posts %}
      <div class = "card border-0 mt-2">
        <a href = "{{ post.url }}"><img src = "{{ site.baseurl }}{{ post.image }}" class = "mx-auto" alt = "..."></a>
        <div class = "card-body">
          <h5 class = "card-title"><a href = "{{ post.url }}">{{ post.title }}</a></h5>
          <span>Published: {{ post.date | date_to_long_string }} </span>
          <p class = "text-muted">{{ post.excerpt }}</p>
        </div>
        <div class = "card-footer bg-white border-0"><a href = "{{ post.url }}" class = "btn btn-primary">Read more</a></div>
      </div>

      <!-- Use modulo to add divs to handle break points -->
      {% assign sm = forloop.index | modulo: 2 %}
      {% assign md = forloop.index | modulo: 3 %}
      {% assign lg = forloop.index | modulo: 4 %}
      {% assign xl = forloop.index | modulo: 5 %}

      {% if sm == 0 %}
        <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
      {% endif %}

      {% if md == 0 %}
        <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
      {% endif %}

      {% if lg == 0 %}
        <div class="w-100 d-none d-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
      {% endif %}

      {% if xl == 0 %}
        <div class="w-100 d-none d-xl-block"><!-- wrap every 5 on xl--></div>
      {% endif %}

    {% endfor %}
  </div>
</div>

This whole code block can be used directly in a website or saved in your Jekyll project _includesfolder.

整个代码块可以直接在网站中使用或保存在您的 Jekyll 项目_includes文件夹中。

Answer 8

回答by Pyetro

Define columns by min width based on viewport:

根据视口按最小宽度定义列：


    /* Number of Cards by Row based on Viewport */
    @media (min-width: 576px) {
        .card-deck .card {
            min-width: 50.1%; /* 1 Column */
            margin-bottom: 12px;
        }
    }

    @media (min-width: 768px) {
        .card-deck .card {
            min-width: 33.4%;  /* 2 Columns */
        }
    }

    @media (min-width: 992px) {
        .card-deck .card {
            min-width: 25.1%;  /* 3 Columns */
        }
    }

    @media (min-width: 1200px) {
        .card-deck .card {
            min-width: 20.1%;  /* 4 Columns */
        }
    }

Answer 9

回答by Bart Gluszak

There's simpler solution for that - set fixed height of card elements- header and body. This way, we can set resposive layout with standard boostrap column grid.

有一个更简单的解决方案 -设置卡片元素的固定高度- 标题和正文。这样，我们可以使用标准的 boostrap 列网格设置响应式布局。

Here is my example: http://codeply.com/go/RHDawRSBol

这是我的示例：http: //codeply.com/go/RHDawRSBol

 <div class="card-deck text-center">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body" style="height: 20rem">
                <h4 class="card-title">1 Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>

Answer 10

回答by Michael Cole

It took me a bit to figure this out, but the answer is to not use a card-deck, but instead to use .rowand .cols.

我花了一点时间才弄清楚这一点，但答案是不要使用卡片组，而是使用.rowand .cols。

This makes a responsive set of cards with specifics for each screen size: 3 cards for xl, 2 for lgand md, and 1 for smand xs. .my-3puts a padding on top and bottom so they look nice.

这使得对于每个画面大小的细节一个响应组牌：3卡xl，2lg和md，以及1sm和xs。 .my-3在顶部和底部放置一个填充物，因此它们看起来不错。

mixin postList(stuff)
  .row
    - site.posts.each(function(post, index){
      .col-sm-12.col-md-6.col-lg-6.col-xl-4
        .card.my-3
          img.card-img-top(src="...",  alt="Card image cap")
          .card-body
            h5.card-title Card title #{index}
            p.card-text Some quick example text to build on the card title and make up the bulk of the cards content.
            a.btn.btn-primary(href="#") Go somewhere
    - })

CSS Bootstrap 4 卡片组，列数基于视口

提问by ganders

回答by Zim

回答by migli

回答by Spanomaly

回答by Mohammad Ayoub Khan

回答by bluegrounds

回答by Ramesh Navi

回答by edsandorf

回答by Pyetro

回答by Bart Gluszak

回答by Michael Cole

相关推荐

最近更新

标签

CSS Bootstrap 4 卡片组，列数基于视口

提问by ganders

回答by Zim

回答by migli

回答by Spanomaly

回答by Mohammad Ayoub Khan

回答by bluegrounds

回答by Ramesh Navi

回答by edsandorf

回答by Pyetro

回答by Bart Gluszak

回答by Michael Cole

相关推荐

CSS Bootstrap 行的底部边框

CSS Angular2 获取窗口宽度 onResize

CSS 离子 - 当离子图标较大时，离子项目文本不会垂直居中

CSS 使滚动条在 div 中始终可见 - chrome

相关推荐

最近更新

标签