bootstrap提供的示例显示4张漂亮的卡片,但无论是视口,它都是4行卡片.请参阅codeply here.
这对我来说没有意义,因为我认为,您希望卡的最小尺寸缩小到适合您的内容仍然看起来不错.
然后我尝试添加一些视口类来打破屏幕大小,但是一旦添加了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,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,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>
解决方法
如果您想要一个响应式卡片组,请使用visibility utils强制在不同视口宽度(断点)上每X列包裹一次…
Bootstrap 4 responsive card-deck(v 4.0.0)
Bootstrap 4 alpha 2的原始答案:
您可以使用网格col – * – *来获得不同的宽度(而不是卡片组),然后使用flexBox将相等的高度设置为cols.
.row > div[class*='col-'] { display: flex; flex:1 0 auto; }
http://codeply.com/go/O0KdSG2YX2(阿尔法2)
问题是w / o flexBox启用了卡片组使用表格单元格,因此很难控制宽度.从Bootstrap 4 Alpha 6开始,flexBox是默认的,因此flexBox不需要额外的CSS,而h-100类可用于使卡片全高:http://www.codeply.com/go/gnOzxd4Spk
原文地址:https://www.jb51.cc/css/217961.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。