html - 调整屏幕大小时，我的元素将其 div 溢出到另一个元素上。为什么会这样？

Question

当网站处于全屏模式时，布局很好，但是当我将窗口调整为更小的尺寸时，元素会溢出到其他元素上。

我尝试将元素包装在主 div 中，但它仍然溢出

<div class="container" style="padding-top:25vh; display: block">
  <!-- <h1 id="projects">Projects</h1> -->
  <div class="row">
    <div class="card col-lg-4 col-md-6 col-sm-12" style="width: 18rem;">
      <div class="card-header bg-transparent">Project Name: </div>
      <a href=""> <img class="card-img-top" src="https://images.unsplash.com/photo-1505238680356-667803448bb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="..."></a>
      <div class="card-body">
        <p class="card-text">Description: </p>
        <p class="card-text">Languages/Frameworks utilized: </p>
      </div>
    </div>

---

它应该留在一个 div 中而不是溢出。

Answer 1

这可能是因为您在这里覆盖了卡片宽度:

class="card col-lg-4 col-md-6 col-sm-12"style="width: 18rem;"

因此您的卡片不再有响应。