我有一个包含主要内容区域和固定宽度侧边栏(https://jsfiddle.net/vesg7wm0/)的页面。我想用侧栏和主要内容区域的一部分填充相同的响应式HTML(可能不是永远,但至少在我决定我想把它放在哪里之前)。但问题是,Bootstrap似乎根据屏幕尺寸而不是div尺寸决定使用哪种尺寸(col-md- *与col-sm- *)。这意味着主要内容和侧边栏将始终使用相同的布局。
有没有办法强制侧边栏中的html(固定为300px)使用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>
答案 0 :(得分:0)
您必须使用JavaScript才能使其适用于元素。
Bootstrap根据屏幕大小调整其列大小的原因是因为Bootstrap使用媒体查询。 This帖子解释说,媒体查询旨在基于设备或media types工作。