每当我添加如下所示的引导卡时，我总是在网页右侧获得不需要的额外空间：图像问题，我正在尝试将所有内容都放在这些部分中，有人知道如何删除这些空间吗？谢谢你！

问题：

我目前正在一个网站上工作，并尽力使用/学习引导程序，并希望实现例如 3 张卡。但是一旦我垂直调整窗口大小，我的所有元素都会向上移动，这会破坏网站的外观，因为它们会与其他元素重叠。我认为问题可能出在我的 flex 元素上，但我不知道如何让它以其他方式工作。

代码：

卡片元素

例如我的页脚

图片：

重叠卡

我目前正在开发一个小仪表板。

我有一个名为profile.php的文件，我在其中尝试使用 html 和 css 创建一张卡片来显示用户的一些值。

然而，正确显示卡片似乎没有任何作用。下面是我用来创建卡片的代码：

在我的个人资料页面本身的 css 中，我唯一一次使用主标签做某事是这部分：

为了给卡片设置样式以进行测试，我使用了 W3Schools 的代码片段：

这是它在网站上的外观：

然而，现在的问题是，尽管我尝试了所有我想到的可以工作的方法，但它只是不会显示卡的盒子。它只是打印页面上的文本，根本没有样式。这与主标签有关吗？不能渲染盒子阴影或任何与样式相关的东西吗？我不相信..我的意思是为什么会这样。

我正在尝试创建一个功能，用户可以在其中即时上传和删除一些图像。删除部分有效但不完全......它成功地从我的静态文件夹中删除了一个图像，但由于某种原因，它只删除了它找到的第一个图像，而不是链接到引导卡的那个。由于某种原因，它没有正确识别正确的值，我不知道为什么：

1. 烧瓶

2. HTML

shop.html

base.html

对于此代码，我使用了该类col-3，并且第二个产品仍然放在第一个产品下。相反，我想把第二张产品卡放在第一张旁边。我从 Bootstrap Card Grid System 中获取了代码，但即使我已将所需的引导 css 和 javascript 链接放入base.html. 我可以问我需要改变什么才能让卡片连续 3 次吗？

所以我正在遍历一个数组并为每次迭代显示一个引导卡。此卡片中有一个按钮，用于打开模式并显示有关每次迭代的更多信息。它当前正在正确显示卡片，但是当单击每张卡片上的按钮时，它将始终显示有关第一次迭代的信息的模式。

这是第一个遍历数组并将每次迭代传递给包含引导卡和模式的组件的组件。

这是包含引导卡以及要打开的模式的组件。

它再次正确显示卡，但是当我使用位于卡上的按钮打开模式时，它会打开一个模式，其中仅包含有关第一次迭代的信息，无论单击哪张卡。任何提示和方向表示赞赏。

因此，我正在为一个使用 Vue.js 的小型项目而苦苦挣扎。我通常不使用框架创建东西，这是我第一次使用它，所以我不能很好地处理它。

我找到了一个项目（更准确地说是这个 - [https://codepen.io/pen/?template=MWobKZM][1]），我想在主标题的顶部放置一个带有预览的上传照片按钮和一个保存按钮，用于所有卡片与我的 API 一起使用（但我我猜我会用 Axios 处理这个保存按钮）。此外，在第二个文本栏中应该有一个音频文件和视频文件的拖放区（就像你看到与 {affirmation_001} 的集成，第一张卡。它应该看起来像这样： 这是我的页面的界面

但是每次我尝试在 js 或 Html 区域的 Vue.component 上添加一些东西时，代码都会崩溃......有什么想法吗？我真的很喜欢那里的卡片

我无法弄清楚是什么导致了我试图用作卡片的 div 之间的额外间隙。我希望 2 个按钮的列更靠近。在 SO 上找到一些类似的帖子后，我尝试删除填充并在 Bootstrap 中查找排水沟，看看是否可以解决问题，但我仍然遇到问题。还有什么我应该改用的吗？

这是 UI 当前的样子，我正在尝试减少卡片之间的空间。

我在引导卡中有一个使用next/image. 我希望图像更小，而不是填满卡片的整个顶部。说大约是原始大小的 60%。我尝试将图像包装在 div 容器中并添加了一些 css，但对更改大小没有任何影响。

我为我的网站创建了一些活动卡片，它在桌面上运行良好，但这些卡片在移动设备上显示不正常（双方同时出现）。

我读到可能存在一些与变换样式相关的问题：preserve-3d; 在 ios 设备上输入 css，但无法让它在我的终端上工作。我在下面的代码笔中复制了这个问题，并链接了另一个可能有用的问题。

关于如何使它在我的用例中工作的任何想法？

https://codepen.io/cleyfe/pen/xxLddoW

Flipcards ...在移动设备上损坏