bootstrap-4 – Bootstrap 4卡列宽度

发布时间：2020-12-17 21:21:03 所属栏目：安全来源：网络整理

导读：我正在使用文档中的代码创建一个具有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

我正在使用文档中的代码创建一个具有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>

Fiddle

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

谢谢

解决方法

它基本上是 same issue as explained here.在Bootstrap中,每个断点定义了不同数量的列.这就是为什么它在小提琴的小屏幕上进入1列.因此,如果您想将其更改为始终为1列,则可以使用CSS,但这会影响整个卡列组,而不仅仅是一张卡.

.card-columns {
        column-count: 1;
    }

https://www.codeply.com/go/PKwviFqstk

另见：Is there a way to specify different width to columns in CSS3?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!