Question

我正在开发一个网络应用程序，我希望在大屏幕上有两个可独立滚动的区域：左侧的主要内容区域和右侧的较小侧边栏。

我已经设法使用absolute定位和overflow属性在CSS中实现这样的布局，请参阅此JSFiddle：http://jsfiddle.net/XLceP/

这很好，但是我也试图利用Bootstrap（3.1.1）来使网站响应和组件/样式。但是我对如何这样做感到茫然。

基本上，我最好使用Bootstrap约定（列类等）来实现它，以便在移动屏幕上右窗格在左窗格下方折叠（或完全消失），以实现传统的垂直布局。占据全宽。但是，在使用absolute定位进行更大的屏幕布局时，似乎无法做到这一点。

我如何尝试解决这个问题？

Answer 1

您可以使用CSS媒体查询来“禁用”移动屏幕上的绝对定位。这将让Bootstrap的响应能力进入......

@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%;
  }
}

演示：http://www.bootply.com/126137

Answer 2

我使用 col-xs-12 分叉了Skelly的bootply 此处 hidden-xs 。

＆＃xA;＆＃xA;

 ＆lt; div class =“col-xs-12 col-sm-6”id =“left “＆GT;＆＃XA; ＆lt; p＆gt;剩余内容＆lt; / p＆gt;＆＃xA; ＆LT; / DIV＆GT; ＆＃XA; ＆lt; div class =“hidden-xs col-sm-6”id =“right”＆gt;＆＃xA; ＆lt; p＆gt;正确的内容＆lt; / p＆gt;＆＃xA; ＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

我更喜欢这个，因为它避免了css文件中的媒体查询。

＆＃xA;

Answer 3

你不需要Bootstrap来做你想做的事。您只需将现有的CSS修改为以下内容：

#left {
  float: left;
  width: 75%;
  height: 100px;
  overflow-y: scroll;
  background-color: #FC6E51;
  text-align: center;
}

#right {
  float: left;
  overflow-y: scroll;
  height: 100px;
  width: 25%;
  background-color: #4FC1E9;
  text-align: center;
}

然后，在移动屏幕的媒体查询中，同时使#left和#right flow：none，width：100％和height：auto;

如果你真的想使用Bootstrap，只需将#left和#right放在以下结构中：

<div class="row">
    <div class="col-md-8" id="left">Your Code Here</div>
    <div class="col-md-4" id="right">Your Code Here</div>
</div>

如何在Bootstrap 3中实现响应式，独立滚动的窗格？

3 个答案: