用 Bootstrap 固定一列的位置答案

【问题标题】：Fixing position of one column with Bootstrap用 Bootstrap 固定一列的位置
【发布时间】：2015-04-23 11:04:54
【问题描述】：

我正在设计的页面有一个固定的标题，在它下面的行中有两个引导列，.col-md-2 和.col-md-10。

我正在尝试将标题固定到页面顶部，并将其下方行中的左列 (.col-md-2) 固定到其位置，但是当我尝试在 CSS 中为标题设置 position: fixed; 和左栏，我页面的整个位置都乱了。

有没有什么方法可以安全地锁定 Bootstrap 中列的位置，而不会丢掉整个页面并保持 Bootstrap 的经典响应能力？

编辑：这是really, really bad demo，但它可能会让您更好地了解我想要做什么。这是diagram

HEADER 的部分我想固定在顶部，ABOUT ME 的部分我想在一个固定在左边的响应列中，POST 的部分我想在一个响应式，而不是右侧的固定列，允许滚动。

我现在拥有的解决方案的一个问题是，当我尝试减小浏览器宽度时，右侧列中的所有文本都会被弄脏，并且根本不像 Boostrapped 列那样。

【问题讨论】：

【解决方案1】：

您正在寻找的解决方案是 2 个演示的混合：

由bootstrap here修复的第一个顶部导航栏（在您的情况下将是标题）...

第二个this so answer 用于左列固定定位...

希望这会有所帮助！

【讨论】：

【解决方案2】：

将 .hidden-xs 添加到 .col-md-4 并将 .col-xs-12 添加到 .col-md-8

一旦在较小的设备上，这将隐藏左侧 col-4 并让您的 col-8 将其位置保持在标题下方...希望您不需要保留 col-4 (?)

编辑：我以为你打错了，col-8 是右边的 col 而不是左边的...

【讨论】：