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

Question

我喜欢我的标题扩展与容器的整个div相同的宽度，以便它是一个长块。我使用的是Bootstrap 4和＆＃34; card＆＃34;它取代了旧面板。

不幸的是，我的标题无法做到这一点。我曾尝试在CSS中操作边距和填充，但这并没有奏效。您可以在图片中看到标题边缘周围有一条白色的条子。我想要容器的整个div周围的白色边框，以保持它与其他内容的偏移，我只想让标题元素覆盖它。

为方便起见，我在标题元素（h2）和它所在的div周围放了一个小边框。

＆＃13;

＆＃13;

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

.card-header {}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来你的.card-header类只有一些填充。下面我将类的左右填充设置为0.这里有一个CodePen，表明它包含了Bootstrap 4。

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：此填充是由card.scss附带的.card-header类引起的