引导程序 3 上的未固定 div 与固定 div 重叠

Question

我目前使用 bootstrap 3 将我的布局页面分为两列。

<div class="row">
  <div class="col-md-4 info">
    <!--some Markup -->
  </div>

  <div class = "col-md-8 tasks-column">
    <!--some Markup -->
  </div> 
</div> 

我希望具有“信息”类的 div 在滚动页面时保持固定在左上角。当我尝试引导“词缀”类时，“信息”中的内容有效地得到修复，但“任务列”突然一直向左移动，完全覆盖它。 我也尝试过普通的 CSS 位置：固定；在“信息”上，但它什么也没做。 info 中的内容不是导航面板。 谢谢各位。

编辑：info 中的内容是动态的（取决于用户输入）。

Answer 1

您需要偏移任务列。尝试这个。

<div class="row">
   <div class="col-md-4 info">
       <!--some Markup -->
   </div>

   <div class = "col-md-8 col-md-offset-4 tasks-column">
       <!--some Markup -->
   </div> 

Answer 2

这是因为您正在修复将“任务列”推到右侧的内容。 做你想做的事情的简单方法就是在 col-md-4 中移动“信息”，如下所示：

<div class="row">
    <div class="col-md-4">
        <div class="info">
            <!--some fixed Markup -->
        </div>
    </div>

    <div class="col-md-8 tasks-column">
         <!--some Markup -->
    </div> 
</div> 

希望这会有所帮助！