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;”

因此，您的卡不再响应。

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

1 个答案: