Bootstrap 列寬/div 定位的奇怪問題

Question

在我進一步推進此頁面的開發過程之前，我很難弄清楚為什么會發生這種情況。

我有一個非常基本的設置：

1. 固定頁腳
2. 固定標題
3. col-lg-3導航欄
4. col-lg-9內容框

我遇到的問題是 nav col-lg-3內的div寬度沒有占據父div的全部寬度。 他們似乎想坐在​​一起。，即使我沒有宣布float - 我什至嘗試clear:both之間。 帶有projects ID 的 div 應該低於帶有 ID problem-div我在做什么錯，或者不理解以便發生這種情況？

注意我假設這是 Bootstrap 問題的原因是因為如果我刪除指向 CDN 的鏈接， html / css按預期運行。

 html, body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; height: 100%; } .main-wrapper { height: 100%; width: 100%; background-color: #DDD; } #header { position: fixed; height: 70px; top: 0; left: 0; width: 100%; background-color: #FFF; display: flex; color: #ED6F2B; text-align: center; } #footer { position: fixed; height: 70px; bottom: 0; left: 0; width: 100%; background-color: #FFF; } #info-column { float: left; display: flex; background-color: #CCC; margin-top: 70px; overflow-x: hidden; overflow-y: scroll; height: calc(100% - 140px); } #map-column { float: left; display: flex; background-color: #93E7ED; margin-top: 70px; overflow: hidden; height: calc(100% - 140px); }

 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div id="header"> HEADER </div> <div class="main-wrapper"> <div id="info-column" class="col-lg-3"> <div id="problem-div" class="text-center"> <div> <a href="//example.com"><img style="width:45%" alt="" src="logo.png"></a> </div> <div> <h2>THIS PERSON'S COMPANY AND SERVICES</h2> </div> <div>(555) 555-5555</div> <div>person@thispersonscompanyandservices.com</div> <div><a href="//example.com">thispersonscompanyandservices.com</a></div> </div> <div id="projects"> PROJECTS </div> </div> <div id="map-column" class="col-lg-9"> MAP CONTENT </div> </div> <div id="footer"> FOOTER </div>

Answer 1

這與引導程序無關。 如果你刪除它，你會得到同樣的問題：

 html, body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; height: 100%; } .main-wrapper { height: 100%; width: 100%; background-color: #DDD; } #header { position: fixed; height: 70px; top: 0; left: 0; width: 100%; background-color: #FFF; display: flex; color: #ED6F2B; text-align: center; } #footer { position: fixed; height: 70px; bottom: 0; left: 0; width: 100%; background-color: #FFF; } #info-column { float: left; display: flex; background-color: #CCC; margin-top: 70px; overflow-x: hidden; overflow-y: scroll; height: calc(100% - 140px); } #map-column { float: left; display: flex; background-color: #93E7ED; margin-top: 70px; overflow: hidden; height: calc(100% - 140px); }

 <div id="header"> HEADER </div> <div class="main-wrapper"> <div id="info-column" class="col-lg-3"> <div id="problem-div" class="text-center"> <div> <a href="//example.com"><img style="width:45%" alt="" src="logo.png"></a> </div> <div> <h2>THIS PERSON'S COMPANY AND SERVICES</h2> </div> <div>(555) 555-5555</div> <div>person@thispersonscompanyandservices.com</div> <div><a href="//example.com">thispersonscompanyandservices.com</a></div> </div> <div id="projects"> PROJECTS </div> </div> <div id="map-column" class="col-lg-9"> MAP CONTENT </div> </div> <div id="footer"> FOOTER </div>

這是由於在#info-column使用了display:flex 。 默認方向是使兩個子 div 彼此相鄰的行。 切換到列方向或簡單地刪除display:flex

 html, body { font-family: 'Montserrat', sans-serif; margin: 0; padding: 0; height: 100%; } .main-wrapper { height: 100%; width: 100%; background-color: #DDD; } #header { position: fixed; height: 70px; top: 0; left: 0; width: 100%; background-color: #FFF; display: flex; color: #ED6F2B; text-align: center; } #footer { position: fixed; height: 70px; bottom: 0; left: 0; width: 100%; background-color: #FFF; } #info-column { float: left; display: flex; flex-direction:column; background-color: #CCC; margin-top: 70px; overflow-x: hidden; overflow-y: scroll; height: calc(100% - 140px); } #map-column { float: left; display: flex; background-color: #93E7ED; margin-top: 70px; overflow: hidden; height: calc(100% - 140px); }

 <div id="header"> HEADER </div> <div class="main-wrapper"> <div id="info-column" class="col-lg-3"> <div id="problem-div" class="text-center"> <div> <a href="//example.com"><img style="width:45%" alt="" src="logo.png"></a> </div> <div> <h2>THIS PERSON'S COMPANY AND SERVICES</h2> </div> <div>(555) 555-5555</div> <div>person@thispersonscompanyandservices.com</div> <div><a href="//example.com">thispersonscompanyandservices.com</a></div> </div> <div id="projects"> PROJECTS </div> </div> <div id="map-column" class="col-lg-9"> MAP CONTENT </div> </div> <div id="footer"> FOOTER </div>