html - 侧边栏不会在较小的屏幕上折叠

Question

我希望我的标题扩展到与容器的整个 div 相同的宽度，以便它是一个长 block 。我正在使用 Bootstrap 4 和替换旧面板的“卡片”。

不幸的是，我的 header 无法做到这一点。我试过在 CSS 中操纵边距和填充，但没有奏效。你可以在图片中看到标题的边缘周围有一条白色的条子。我希望容器的整个 div 周围有白色边框，以使其与其他内容保持偏移，我只希望 header 元素将其覆盖。

为方便起见，我在 header 元素 (h2) 及其所在的 div 周围放置了一个小边框。

#bio .container {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 4px;
}

.card-header {}

<div class="col-9 ml-2">
  <section id="bio">
    <!--bio section-->
    <div class="container">
      <div class="card-header" style="border: 1px solid black">
        <h2 style="border: 1px solid green">Summary</h2>
      </div>
      <p class="card-text">
        I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
        to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
        <br />
        <br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
        one concept in class, even in college. I frequently am recommended by parents to friends and family members.
      </p>
    </div>
  </section>

Answer 1

看起来您的 .card-header 类周围只有一点填充。下面我将类的左右填充设置为 0。这是一个 CodePen展示它与包含的 Bootstrap 4 一起工作。

如果我完全错过了要点，请随时告诉我。

#bio .container {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 4px;
}

.card-header {
    padding-left: 0;
    padding-right: 0;
}

<div class="col-9 ml-2">
  <section id="bio">
    <!--bio section-->
    <div class="container">
      <div class="card-header" style="border: 1px solid black">
        <h2 style="border: 1px solid green">Summary</h2>
      </div>
      <p class="card-text">
        I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
        to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
        <br />
        <br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
        one concept in class, even in college. I frequently am recommended by parents to friends and family members.
      </p>
    </div>
  </section>

编辑:此填充是由 card.scss 中包含的 .card-header 类引起的