Bootstrap 4 卡列宽度 [英] Bootstrap 4 card-columns width

问题描述

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

<div class="card"><img class="card-img-top img-fluid" src="..." alt="卡片图片上限"><div class="card-block"><h4 class="card-title">换行的卡片标题</h4><p class="card-text">这是一张较长的卡片，下面的支持文本是附加内容的自然引导.这个内容有点</p>

小提琴

我想要的是让我的列占据提供的整个宽度.就像在我的例子中一样，当我在某个时候向右调整它的大小时，它会占用整个空间.这可能吗?

谢谢

解决方案

基本上就是 与此处说明的问题相同.在 Bootstrap 中，每个断点定义了不同数量的列.这就是为什么它在小提琴的小屏幕上转到 1 列的原因.因此，如果您想将其更改为始终跨 1 列，您可以使用 CSS，但这会影响整个卡片列组，而不仅仅是单个卡片.

 .card-columns {列数:1；}

https://codeply.com/go/PKwviFqstk

另见:有吗一种在 CSS3 中为列指定不同宽度的方法?

I am using code from the docs to create a card-columns layout that will have 3-4 cards. I am starting with just one. Here is my code:

<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

What I want is to have my column taking the whole width provided. Just like in my example when I am resizing it to the right at some point it takes the whole space. Is that possible?

Thanks

解决方案

It's basically the same issue as explained here. In Bootstrap each breakpoint defines a different number of columns across. That's why it goes to 1 column on small screens in the fiddle. So, if you want to change it to always be 1 column across you can use CSS, but this will effect the entire group of card columns, not just a single card.

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

https://codeply.com/go/PKwviFqstk

Also see: Is there a way to specify different widths for columns in CSS3?

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