如何使Bootstrap 3布局響應div大小而不是屏幕大小

Question

我有一個頁面，其中包含主要內容區域和固定寬度的側邊欄（ https://jsfiddle.net/vesg7wm0/ ）。 我想用相同的響應HTML填充側邊欄的一部分和主內容區域的一部分（可能不會永遠存在，但至少要等到我決定將其放置在哪里時為止）。 但是，問題在於，Bootstrap似乎是根據屏幕大小而不是div大小來決定使用哪種大小設置（col-md- *與col-sm- *）。 這意味着主要內容和側邊欄將始終使用相同的布局。

有沒有辦法強制固定在300px的側邊欄中的html使用col-sm- * / col-xs- *布局？

我認為iframe是一種可能的解決方案（ https://jsfiddle.net/kwzcL8y6/1/ ），但這似乎有很多自身的格式問題，此外，我還必須將該內容移至其自己的頁面（ ，您知道，也許我還是應該這樣做）。

因此，除了iframe之外，您還可以讓HTML響應其父div，而不響應總屏幕尺寸嗎？ 還是iframe還是什么？

謝謝！

 /* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); .sidebar-transition { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: .50s ease-in-out; -moz-transition: .50s ease-in-out; -o-transition: .50s ease-in-out; transition: .50s ease-in-out; -webkit-text-size-adjust: none; } .MainWindow { width: calc(100% - 15px); margin-left: 15px; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .SideBar { position: fixed; top: 0; left: -300px; height: 100%; width: 295px; overflow-x: hidden; overflow-y: auto; padding: 20px; } .sidebar-toggle { position: absolute; opacity: 0; } .sidebar-toggle-label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: auto; width: auto; display: block; position: fixed; left: 5px; top: 50%; cursor: pointer; background: rgba(0, 0, 0, .0); z-index: 1; } .sidebar-icon:before { content: "\\f138"; } .sidebar-toggle:checked ~ .sidebar-icon:before { content: "\\f137"; } .sidebar-toggle:checked ~ .sidebar-toggle-label { left: 292px; } .sidebar-toggle:checked ~ .SideBar { left: 0px; } .sidebar-toggle:checked ~ .MainWindow { margin-left: 300px; width: calc(100% - 300px); } 

 <div class="container-fluid"> <div class="row"> <input id="sidebar-toggle" type="checkbox" name="sidebar-toggle" class="sidebar-toggle sidebar-transition" checked /> <label for="sidebar-toggle" id="sidebar-toggle-label" class="sidebar-toggle-label fa sidebar-icon bigger-170 sidebar-transition"></label> <div id="SideBar" class="SideBar sidebar-transition"> <div class="row" id="AjaxRow"> <div class="col-md-12"> <div class="row"> <div class="panel panel-primary"> <a data-toggle="collapse" data-parent="#Ajax-heading" href="#Ajax-body" aria-expanded="false" aria-controls="Ajax-body" class="section-header"> <div class="panel-custom panel-heading" role="tab" id="Ajax-heading"> <div class="panel-title font14px"> Sidebar <div class="pull-right"><i id="iAjaxImgSwap" class="fa accordion-icon"></i> </div> </div> </div> </a> <div class="row"> <div class="col-md-12"> <div id="Ajax-body" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="Ajax-heading"> <div class="panel-body"> <div class="form-group"> <div class="row" style="margin-top: 10px"> <div id="ajaxPaneHtml" class="col-md-12"> <div class="row"> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: green"></div> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: red"></div> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: blue"></div> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: yellow"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="MainWindow" class="MainWindow col-md-12 sidebar-transition"> <div class="row" style="margin-top: 10px"> <div id="mainAjaxPaneHtml" class="col-md-12"> <div class="row"> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: green"></div> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: red"></div> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: blue"></div> <div class="col-md-6 col-sm-3 col-xs-3" style="height: 50px; background-color: yellow"></div> </div> </div> </div> </div> </div> </div> 

Answer 1

您必須使用JavaScript才能使此功能適用於某個元素。

Bootstrap根據屏幕大小調整其列大小的原因是Bootstrap使用媒體查詢。 這篇文章解釋說，媒體查詢旨在根據設備或媒體類型工作 。