- 首页
- 前端开发
- 如何在 Bootstrap 中实现响应式、独立滚动的窗格?
如何在 Bootstrap 中实现响应式、独立滚动的窗格?
[英] How to implement responsive, independently scrolling panes in Bootstrap?
本文介绍了如何在 Bootstrap 中实现响应式、独立滚动的窗格?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个网络应用，我希望在大屏幕上有两个独立的可滚动区域:左侧的主要内容区域和右侧的较小侧边栏.
我已经设法使用 absolute 定位和 overflow 属性在 CSS 中实现了这样的布局，请参阅此 JSFiddle:http://jsfiddle.net/XLceP/
这很棒，但是我也在尝试使用 Bootstrap (3.1.1) 来使站点具有响应性和组件/样式.但是我不知道该怎么做.
基本上，我希望使用 Bootstrap 约定(列类等)来实现，以便在移动屏幕上，对于传统的垂直布局，右窗格折叠在左窗格下方(或完全消失)，同时具有占据整个宽度.然而，在对更大的屏幕布局使用 absolute 定位时似乎不可能做到这一点.
我该如何尝试解决这个问题?
解决方案
2019 年更新
引导程序 4
现在 Bootstrap 4 使用 flexbox，您可以使用 flex-grow 和新的溢出实用程序类来实现此布局.这最大限度地减少了之前在 BSv3 中所需的额外 CSS...
<nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0"><a class="navbar-brand";href=#">App</a><ul class="navbar-nav"><li class="nav-item"><a href="#";class=nav-link">Nav</a></li></nav><div class="row flex-grow-1 overflow-hidden"><div class="col-2 mh-100 overflow-auto py-2"><h6>侧边栏</h6><ul class="nav flex-column"><li class="nav-item"><a class="nav-link active";href=#">链接</a><li class="nav-item"><a class="nav-link";href=#">链接</a>
<div class="col mh-100 overflow-auto py-2"><h3>正文内容</h3>
<div class="row flex-shrink-0 bg-light"><div class="col-12 py-2"><p>页脚...</p>
https://codeply.com/go/LIaOWljJm8
引导程序 3(原始答案)
您可以使用 CSS 媒体查询来禁用"手机屏幕上的绝对定位.这将使 Bootstrap 的响应能力发挥作用...
@media(最小宽度:768px){#剩下 {位置:绝对；顶部:0px；底部:0；左:0；宽度:75%；溢出-y:滚动；}#正确的 {位置:绝对；顶部:0；底部:0；右:0；溢出-y:滚动；宽度:25%；}}
演示:http://bootply.com/126137
I'm working on a web app for which I want to have two independently scrollable areas on larger screens: a main content area on the left, and a smaller sidebar on the right.
I've managed to implement such a layout in CSS using absolute positioning and overflow properties, see this JSFiddle: http://jsfiddle.net/XLceP/
This is great, however I'm also attempting to make use of Bootstrap (3.1.1) in order to make the site responsive and for the components/styling. However I'm at a loss at how to do so.
Basically, I'd ideally like to use Bootstrap conventions (the column classes etc.) to make it so that on mobile screens the right pane collapses below the left pane (or disappears entirely) for a conventional vertical layout, with both taking up the full width. However it seems impossible to do this while using absolute positioning for the larger screen layout.
How can I attempt to tackle this problem?
解决方案
Update 2019
Bootstrap 4
Now that Bootstrap 4 uses flexbox, you can this layout using flex-grow and the new overflow utility classes. This minimizes the extra CSS that was needed before in BSv3...
<div class="container-fluid d-flex flex-column flex-grow-1 vh-100 overflow-hidden">
<nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0">
<a class="navbar-brand" href="#">App</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Nav</a></li>
</ul>
</nav>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-2 mh-100 overflow-auto py-2">
<h6>Sidebar</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="col mh-100 overflow-auto py-2">
<h3>Body content</h3>
</div>
</div>
<div class="row flex-shrink-0 bg-light">
<div class="col-12 py-2">
<p>Footer ...</p>
</div>
</div>
</div>
https://codeply.com/go/LIaOWljJm8
Bootstrap 3 (original answer)
You can use a CSS media query to "disable" the absolute positioning on mobile screens. This will let Bootstrap's responsiveness kick in...
@media (min-width: 768px){
#left {
position: absolute;
top: 0px;
bottom: 0;
left: 0;
width: 75%;
overflow-y: scroll;
}
#right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
width: 25%;
}
}
Demo: http://bootply.com/126137
这篇关于如何在 Bootstrap 中实现响应式、独立滚动的窗格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
