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

Question

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

不幸的是，我的页眉无法执行此操作。 我试过在CSS中操纵边距和填充，但这没有用。 您可以在图片中看到页眉边缘周围有一小段白色。 我希望容器整个div周围的白色边框使它与其他内容保持偏移，我只希望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类引起的