如何使Bootstrap 3布局响应div大小而不是屏幕大小

Question

I've got a page with a main content area and a fixed-width sidebar ( https://jsfiddle.net/vesg7wm0/ ). I'd like to populate a section of the sidebar and a section of the main content area with the same responsive HTML (maybe not forever, but at least until I decide where I want to put it). The problem, though, is that Bootstrap seems to decide which sizing (col-md-* vs. col-sm-*) to use based on screen size, not on div size. This means that the main content and the sidebar will always use the same layout.

Is there a way to force the html in the sidebar, which is fixed at 300px, to use the col-sm-* / col-xs-* layout?

I think iframes are a possible solution ( https://jsfiddle.net/kwzcL8y6/1/ ), but that seems to have a host of its own formatting issues, plus I would have to move that content out to its own page (which, y'know, maybe I should do anyway).

So, other than iframes, can you make HTML be responsive to its parent div, and not to the total screen size? Or is it iframes or nothing?

Thanks!

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

You'd have to use JavaScript in order to make this work for an element.

The reason Bootstrap resizes its columns based on the screen size is because Bootstrap uses media queries. This post explains that media queries are designed to work based on devices or media types .