问题标签 [bootstrap-cards]

使用引导卡文本和水平列表组，我能够在引导卡中显示信息，但我希望它们像引导 4 形式一样可编辑。那么，我将如何做到这一点？我提供了在 bootstrap 4 卡中显示信息的代码。

我创建了一个 Bootstrap 3 卡片宽度，并将 div class="card-wide-image-wrap" 设置为 50% 的最小宽度。这可以确保在我的笔记本电脑上正确显示（否则它不会显示带有覆盖文本块的完整图像）。但是，div 的最小宽度为 50% 会破坏卡片在手机上的显示方式（下图）。有没有办法来解决这个问题？

第二个问题：对于右侧添加的每一行文本，左侧的图像似乎都变大了。图像能否以某种方式与卡片的文本面分离，使其保持固定？

下图是 PC/大屏幕上想要的结果。当我将 div min-width 设置为 50% 时，我得到了这个。

但是，如下图所示，这在手机上并没有很好地显示： 如果我省略 div min-width 50%，我会在 PC/大屏幕上得到以下不需要的结果：

但是，它会在移动设备上正确显示：

这是我的代码。谢谢瑞克：

我在查看页面时遇到问题。每次在我的页面上创建“事件”时，我都希望卡片并排放置，每行最多两个/三个“卡片”。而现在它们被放置在另一个之下。如何创建一个循环，为我分配每行的最大卡值。或者我可以用css解决它吗？

事件列表.jsp

我在卡片中添加了一张新图片，当我进行搜索时，卡片被压扁了。无法确定它是与 Bootstrap 相关的网格还是图像大小的问题。我感谢任何有建议我可以做些什么来解决这个问题的人。我已经修改了 .card-top-img css 规则，但这不起作用。我尝试了不同的网格选项。

代码的 JSFiddle

我想创建一个引导卡，其中标题位于图像上方的半透明框中，而卡片的其余部分看起来像普通的引导卡。到目前为止，这是我的代码：

这是它的外观：

我的代码问题是这个包含卡片标题的红色框没有响应。它不仅跨越图像，而且跨越整个卡片。如何更改它以使红色框位于图像底部？我已经尝试更改 css“顶部”并添加了一个“底部”，但由于文本不在图像上而是在整个卡片上，所以它不起作用。

我希望结果如下所示：

无论屏幕大小如何，包含卡片标题的红色框都应始终位于图像的底部。

更新

这是包含以下代码后的样子。

我正在尝试在 boostrap 卡上使用垂直标题（附图片），但我没有找到任何示例如何做到这一点。知道怎么做吗？

谢谢你的海带

垂直标题

如果它没有任何按钮，我正在尝试扩展最后一个卡片页脚以填充其余空间。我尝试了许多弹性组合，但运气不佳。

我希望我的卡片覆盖屏幕的相等宽度，但我下面的代码是根据内容。

试过了card-deck，但没有帮助。

我希望我的卡片覆盖屏幕的相等宽度，但我下面的代码是根据内容。

试过了card-deck，但没有帮助。

我希望我的卡片覆盖屏幕的相等宽度，但我下面的代码是根据内容。

试过了card-deck，但没有帮助。

出于某种原因，当我尝试使用 Bootstrap 4 的卡片栏时，较短卡片的高度最终会拉伸到与旁边的卡片相等。仅当我将“行”类应用于父 div 时才会发生这种情况。但是，如果我删除“行”类，这些卡片会在 Chrome 中堆叠在一起（这是一个已知错误，尽管我还没有找到其他解决方案）并且不会在较小的屏幕尺寸上堆叠在 Safari 中。我遇到的另一个问题是，如果我对卡片应用 100% 的高度，它们不会拉伸，但它下面的卡片不会靠近它上面的卡片，所以会有很大的间隙。

我认为以这种方式使用卡片栏的目的是实现砌体外观，但对我来说似乎并不是这样。我猜这可能与“行”类上的 flexbox 属性有关，但似乎我需要这样才能将它们并排布置在 2 列中。

下面是我的代码。让我知道你们中是否有人对此有解决方案。先感谢您！

我正在尝试连续创建这样的引导卡布局：

到目前为止，我尝试过的是：

结果是这样的：

有人有想法么？提前致谢！：）

顺便说一句*我正在使用 Bootstrap 4。