卡片在主标签内显示不正确

Question

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

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

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

<main>
  <div class="card">
    <div class="container">
      <p> Username: <?= $_SESSION['username'] ?> </p>
    </div>
  </div>
</main>

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

main {
    margin-left: 5rem;
    padding: 1rem;
}

为了设计用于测试的卡片，我使用了来自 W3Schools 的代码片段：

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

这是它在网站上的样子：

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

Answer 1

它的工作原理如您所见，也许某些 css 覆盖卡 class（然后将卡重命名为其他名称），或者您的 css 未应用。尝试在开发工具中调试。

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}
main {
    margin-left: 5rem;
    padding: 1rem;
}

<main>
  <div class="card">
    <div class="container">
      <p> Username: darby </p>
    </div>
  </div>
</main>

卡片在主标签内显示不正确

Cards are not displaying correctly inside of main tag

html

css

bootstrap-cards