Bootstrap里position=fixed的col覆盖其他col怎么解决?

标签: bootstrap
发布时间: 2017/11/10 13:48:29
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在我的bootstrap网站上有一个问题。我的网站设置如下:

<div class="container">
     <div class="row">
         <div class="col-md-9" style="text-align:left;padding-top: 2%">
         Some content
         </div>
         <div class="col-md-3" style="position:fixed">
         Scrolling Sidebar
         </div>
     </div>
 </div>

我一直在试着用我的脑袋来解释为什么侧边栏会一直浮动到左边,这是一个col3,但是有一个更大的容器,所以它在我的屏幕上要大得多。有人见过类似的东西吗?

解决方法 1:

有重叠的原因是当你设置了position:fixed的时候 — 它从页面的流动中取出,剩下的内容占据了它的位置。当它被固定时,你需要显式设置宽度。在下面,我使用一个"is-fixed"的class来设置固定位置的样式。

<div class="container">
          <div class="row">
             <div class="col-md-9" style="text-align:left;padding-top: 2%">
             Some content
             </div>
             <div class="col-md-3 is-fixed">
             Scrolling Sidebar
             </div>
          </div>
 </div>

//css style for element that is fixed
.is-fixed {
  position:fixed;
  top:0;
  right:0;
  width:200px; // or whatever
}


官方微信
官方QQ群
31647020