本文介绍了Bootstrap 4卡柱宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用文档中的代码来创建一个卡片列布局,该布局将包含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卡柱宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 03:45
查看更多