Bootstrap 4 卡组中不同大小的卡 [英] Cards with different sizes in Bootstrap 4 card-group

查看：35
本文介绍了Bootstrap 4 卡组中不同大小的卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以在 Bootstrap 4 中的卡片组中混合不同尺寸的卡片.我想在左边有一张大卡片(双倍宽度)，右边有两张小卡片，高度相同三个.

<div class="row"><div class="card-group"><div class="card col-md-6"><div class="card-block"><h4 class="card-title">卡片 1</h4><p class="card-text">Text 1</p>

<div class="card col-md-3"><div class="card-block"><h4 class="card-title">卡片 2</h4><p class="card-text">Text 2</p><p class="card-text">更多文字2</p><p class="card-text">更多文字2</p>

<div class="card col-md-3"><div class="card-block"><h4 class="card-title">卡片 3</h4><p class="card-text">Text 3</p>

解决方案

我认为的意图是卡片组的宽度和高度相等(http://v4-alpha.getbootstrap.com/components/card/#groups)，但您可以覆盖默认的 Bootstrap 行为以使其像这样工作..

.card-group [class*='col-'] {浮动:无；}

http://codeply.com/go/4WVwRBTyTP

注意:像这样的通配符 CSS 选择器很慢.最好添加一个特殊的 CSS 类来覆盖 card-group

中列的 Bootstrap float:left 行为

更新

现在 BS4 有 flexbox，不再需要额外的 CSS.只需将 card-group 和 row 设为同一个 div，然后正常使用 col-* 设置宽度.但是，使用 card-group 会阻止响应式列换行.

http://www.codeply.com/go/jzIcjyg6Xa

Is it possible to mix card of different sizes within a card-group in Bootstrap 4. I want to have a large card (double width) on the left size, and two smaller cards on the right, with the same height of all three.

<div class="container">
  <div class="row">
    <div class="card-group">
        <div class="card col-md-6">
          <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
          </div>
        </div>
         <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
          </div>
        </div>
        <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>

解决方案

I think the intention is that card groups are equal width and height(http://v4-alpha.getbootstrap.com/components/card/#groups), but you could override the default Bootstrap behavior to make it work like this..

.card-group [class*='col-'] {
  float:none;
}

http://codeply.com/go/4WVwRBTyTP

Note: Wildcard CSS selectors like this are slow. It would be better to add a special CSS class to override the Bootstrap float:left behavior of the columns in your card-group

UPDATE

Now that BS4 has flexbox, the extra CSS is no longer required. Just make the card-group and row the same div, and then use col-* as normal to set width. However, using card-group will prevent responsive column wrapping.

http://www.codeply.com/go/jzIcjyg6Xa

这篇关于Bootstrap 4 卡组中不同大小的卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆