问题描述
我正在使用文档中的代码来创建一个卡片列布局,该布局将包含3-4张卡片.我从一个开始.这是我的代码:
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>
我想要的是让我的专栏占据所提供的整个宽度.就像在我的示例中,当我在某个时候将其调整为正确的大小时,它占用了整个空间.有可能吗?
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?
谢谢
推荐答案
它基本上是.在Bootstrap中,每个断点定义的列数不同.这就是为什么小提琴在小屏幕上只显示1列的原因.因此,如果您希望将其更改为始终为1列,则可以使用CSS,但这会影响 entire 组卡片列,而不仅仅是单个卡片.
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://www.codeply.com/go/PKwviFqstk
另请参阅:一种在CSS3中为列指定不同宽度的方法?
这篇关于Bootstrap 4卡柱宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!