側邊欄在較小的屏幕上不會折疊

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類引起的