Question

我的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>

我一直试图绕过为什么侧栏一直向左浮动并且是一个col-3但是有一个更大的容器，所以它在我的屏幕上要大得多。有没有人见过这样的东西？

Answer 1

存在重叠内容的原因在于，当您创建某个位置时：固定 - 它将其从页面流中取出并且其余内容取代它。您需要在修复时明确设置宽度。在下面我使用的是一个＆＃34; is-fixed＆＃34;设置固定位置样式。

<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
}

Bootstrap数据附加/位置固定col与其他col重叠

1 个答案: