Bootstrap 4 卡列宽度

Posted 2023-03-05

【中文标题】Bootstrap 4 卡列宽度

【英文标题】：Bootstrap 4 card-columns width

【发布时间】：2018-01-15 03:04:43

【问题描述】：

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." >
     <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

我想要的是让我的列占据提供的整个宽度。就像在我的示例中，当我在某些时候将其调整到右侧时，它会占用整个空间。这可能吗？

谢谢

【参考方案1】：

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

    .card-columns 
        column-count: 1;
    

https://codeply.com/go/PKwviFqstk

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