相关疑难解决方法(0)

我正在尝试在bootstrap 4中实现卡片功能,以使我的所有卡片都具有相同的高度.

bootstrap提供的示例显示4张漂亮的卡片,但无论是视口,它都是4行卡片.请在此处查看codeply .

这对我来说没有意义,因为我认为,为了让你的内容看起来还不错,你需要将卡的最小尺寸缩小.

然后我尝试添加一些视口类来打破屏幕大小,但是一旦添加了div,卡片组就不再适用,因此不会使卡片的高度相等.

我怎样才能完成这项工作？这是缺少的功能,将在Bootstrap 4的完整版本中解决吗？

这是小提琴: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, …

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

看起来列的数量取决于组中的card-div数量.有没有办法根据视口改变列数？例如,宽4个/卡宽,中宽2宽,1宽小？

目前,他们保持相同数量的列/卡宽,直到小于544px.在544px和更大,他们必须display: table-cell与screen (min-width: 544px)规则.

有没有办法通过仅更改CSS使基于视口的卡具有不同数量的列？

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

Codepen示例4 col/card wide和3 col/card wide http://codepen.io/jpost-vlocity/full/PNEKKy/

我正在使用文档中的代码创建一个具有3-4张卡片的卡片列布局.我刚开始只有一个.这是我的代码:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title that wraps to a new line</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>
  </div>
</div> 

小提琴

我想要的是让我的柱子提供整个宽度.就像在我的例子中,当我在某个时刻向右调整它时,它需要整个空间.那可能吗？

谢谢