Question

如何通过单击按钮在Bootstrap中获得带有滚动条的2列？以下是详细信息：

我的页面有一个行 - 流体div，其中包含main-column和extra-content的主列div。我有一个按钮，用于将额外内容传输到另一个名为右列的div。（该按钮也使右栏更大。）这一切都很好。

点击之前：

主柱
  M a i n Content Div
  E x t r a Content Div

点击后，额外内容转到右栏：

主栏|右栏
主要内容|额外内容

我现在希望右键和主列在点击后各自获得自己的滚动条，这样人们可以分别滚动每一侧。但是，当我尝试添加代码来执行此操作时，右列最终位于主列下方。然后我尝试了其他代码，但它没有做任何事情。我该怎么做呢？我的代码如下。

HTML：

<html>
<body>
<div class="container-fluid">

<div class = "row-fluid" id="parent-column">
  <div class = "span8" id="main-column">
     <div id="main-content">
       <p>Lorem ipsum...</p>
     </div>

     <div id="extra-content">
        <span class="btn" id="two-column-button">Two-Column</span>
     </div>

   </div>

  <div class = "span1" id="right-column">
  </div>
</div>

</div>
</body>
</html>

第二次尝试CSS :(什么也没做）。

#right-column{
  overflow: auto;
  width: 50%;
  float: right;
  height: 100%
}

#main-column{
  overflow: auto;
  width:45%;
  float:left;
  height: 100%
}

#parent-column{
  overflow:hidden;
}

Answer 1

这是一个（愚蠢的）错误：

 height: 100%

一旦我用设定的高度替换它，滚动工作。

如何在响应式引导程序中创建带有单独滚动条的两列？

1 个答案: