问题标签 [bootstrap-cards]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

107 问题

0 投票

1 回答

25 浏览

css - Bootstrap 3 卡水平对齐

我想要在 Bootstrap 中水平的卡片类型结构。像这样的东西也需要分页以获得更多卡片。

谁能帮我做这个设计

2021-04-27T13:23:27.467

0 投票

2 回答

129 浏览

html - 如何在 Bootstrap Card 中使用 CSS 调整图像大小和裁剪图像？

以下问题：我有一些带有图片的 Bootstrap 卡片元素，有些图片有不同的尺寸/比例，比如中间的那张（见附件截图）。因此我的卡片元素不在一行中。那样不是很好。

现在我想将这些图像调整为其他图像的高度，并裁剪溢出。我怎么做？这是我一张卡的代码片段......

PS：#cities里面的卡片元素是用grid和grid-template-columns排列的。

谢谢呜呜！:)

截屏

html css bootstrap-cards

2021-05-02T11:23:14.977

0 投票

1 回答

42 浏览

html - 使卡片项目与其他卡片对齐

我有一个问题，当我添加其他文本时，卡片内的项目彼此不对齐。

正如您在下图中所见，书籍和推荐书籍中的项目是匹配/对齐的。.

这是我在推荐书籍中添加查看次数时的图像。

如您所见，书 1 中的项目已调整，我不希望发生这种情况我想匹配/对齐书籍中的第 1 和推荐书籍中的第 1，即使在推荐书籍中添加了查看次数后也是如此。

所以这是我的卡片代码。

据我所知，w-100并使h-100卡片相互响应。但是我希望items来自书籍和推荐书籍 items的匹配..我做了 w-100 和 h-100 以响应卡片的宽度和高度。

编辑：我已经删除了h-100我卡中的内容，这就是结果。我希望书籍的高度和推荐的高度应该匹配。但是，当我将其退回时，项目未对齐，如第二张图片所示。

html css bootstrap-4 bootstrap-cards

2021-05-22T01:02:24.787

0 投票

1 回答

1446 浏览

html - 嵌套卡片，卡片内的拟合卡片 - 引导卡片

我正在尝试在我的项目中做嵌套卡片，所以基本上我有三张卡片。父母一个Research Dashboard，第二个持有类别 ex。Recently Added Research最后，第三个或third card包含图像/卡片标题和按钮的。但是，在移动浏览器上查看时遇到了麻烦。正如您在图像中看到的那样，第三张卡片一直延伸到第一张我不喜欢的卡片，第三张卡片应该只转到第二张卡片Recently Added Research。

我试过重新调整卡片的宽度，但是每当我在桌面浏览器上查看它时它就会被破坏，这是我不喜欢的。