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>

滚动页面时，我希望带有“info”类的div保持固定在左上角。当我尝试引导“affix”类时，“info”中的内容有效地得到修复，但“tasks-column”突然一直向左移动，完全覆盖它。我也试过普通的CSS位置：固定;在“信息”，但它没有做任何事情。信息中的内容不是导航面板。谢谢你们。

编辑：信息中的内容是动态的（根据用户输入而有所不同）。

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

这是因为您正在修复推送＆＃34; tasks-column＆＃34;在右边。做你想做的事的简单方法就是移动＆＃34; info＆＃34;在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>

希望这有帮助！

未固定的div重叠固定div在bootstrap 3上

2 个答案: