问题标签 [bootstrap-cards]

我正在尝试将简单的阴影应用于卡片组件。不知何故，阴影出现故障，看起来像镜像和错位。

我认为这与它有关，margin-bottom但还有更多我无法弄清楚。

让卡片有阴影的正确做法是什么？

https://jsfiddle.net/qdjeuo65/

我的浏览器是 Chrome 84。

无法将卡页脚设置为预期输出

预期输出：

我的代码：

jsfiddle： https ://jsfiddle.net/sidh_41/p8sdfy7u/2/

我想react-bootstrap在项目中添加卡片。我使用了 react-bootstrap 中的 Grid 和 CardDeck 选项。但是所有卡片都在一列中（像这样）。但我希望这张卡片并排出现，而不是排成一行。（我想要我的输出像这张图片）。

这里是卡片部分的代码

我在哪里传递价值

我想为不使用数据库的引导卡创建一个实时搜索栏。我能够完成实时搜索，但它保留了隐形搜索和过滤搜索之间的空间。这是我用来过滤卡片的脚本，

所有卡片的编码为，

搜索前：

搜索后：

请告诉我如何摆脱这些空间。

我尝试以这种方式使用带有卡片的卡片组：

• 卡片组以列为中心
• card-deck 适合内容宽度（实际上，它总是 100% 宽度，宽度：auto 不会改变任何东西）
• 卡片组内的卡片是左对齐的

我构建了一个简单的代码笔进行测试，尝试了很多东西，但从来没有好的行为......见https://codepen.io/studio-matavai/pen/zYBeQOX

没有人知道该怎么做吗？

问候。

- - - 编辑 - - -

有图片:)

我已经创建了引导卡并放置了来自后端的列表，但它没有正确显示（意味着字母一个接一个）

仪表板.comonent.html

有没有其他方法可以水平和动态放置列表。

任何人都可以帮助我解决这个问题。

下面是一个带有引导程序 4 的 Html 代码。它有一个固定的页眉和页脚，中间有可滚动的引导卡。滚动时，一些卡片隐藏了标题。如何使卡片在标题“后面”滚动？

在这里看到它的作用

按以下顺序排列 3 张引导卡的最佳方法是什么：

• 左侧的 Card1
• Card2 和 Card3 在右侧
• Card2 有一个固定的高度
• Card3 根据 Card2 的大小灵活
• Card3 有一个自定义滚动条
• 卡片是响应式的，并在移动屏幕上一个接一个地放置。

请看下图。

我有以下代码和 html（启用了引导）页面，它只在页面上显示三个带有图像的引导卡。

我想

a) 要包含的左侧边距 b) 卡片水平显示（一个接一个地在屏幕上）而不是垂直显示。

我尝试了各种方法，但无济于事。可以为初学者解释清楚的人解释如何实现这些目标。

完整代码

饰品

https://trinket.io/html/8fcb4c4f39?runMode=autorun

当前显示

更新：

我明白我可以重新开始并尝试在这个结构中实现所有内容

但是出于教学目的，有没有一种简单的方法可以添加我必须达到的结果，从而教授正在做的事情的原则。

我有以下 boostrap 卡片，我想通过使用一些 css 来设置它们的样式（覆盖现有样式）。

卡号

我尝试在 css 中添加的内容（在 head 标签中）

在这个位

我试图参考引导类卡，并改变它的风格。

任何人都可以指出我在解决方案方面做错了什么，并为初学者提供足够的解释。

目标：目标是使用我提供的 css 设置卡片样式。例如，卡片的 p 和 h1 标签按照我指定的样式设置。在这种情况下，卡片中的标题为绿色，段落为红色，卡片正文为蓝色。由于某种原因，头部应用的样式不适用于卡片。

我试过的：

我也试过按照建议分别做每一个

在上述情况下，第一种样式（蓝色）有效，但没有改变 h1 和 p。