用 Bootstrap 固定一列的位置
Fixing position of one column with Bootstrap
我正在设计的页面有一个固定的 header，在它下面的行中有两个 Bootstrap 列，.col-md-2 和 .col-md-10。
我正在尝试将 header 固定到页面顶部并将其下方行中的左列 (.col-md-2) 固定到其位置，但是当我尝试设置 position: fixed; 在 CSS 的 header 和左栏中，我的页面的整个位置都乱七八糟。
有什么方法可以安全地锁定在Bootstrap中某列的位置，而不会丢掉整个页面和保持Bootstrap的经典响应能力？
编辑：这是一个 really, really bad demo but it may give you a better idea of what I'm trying to do. Here is a diagram
HEADER 的部分我想固定在顶部， ABOUT ME 的部分我想固定在左侧的响应栏中， [=17 的部分=] 我想在允许滚动的右侧的响应式而非固定列中。
我现在拥有的解决方案的一个问题是，当我尝试减少 browser-width 右侧列中的所有文本时，它会被弄脏，并且不会像 Boostrapped 列那样工作根本。
将 .hidden-xs 添加到您的 .col-md-4 并将 .col-xs-12 添加到您的 .col-md-8
一旦在较小的设备上，这将隐藏左侧的 col-4 并让您的 col-8 保持其位置低于 header...希望您不需要保留 col-4 (? )
编辑：我假设你打错了，第 8 列是右列而不是左列...
您正在寻找的解决方案是 2 个演示的组合：
第一个顶部导航栏（在您的情况下将是 header）由 bootstrap here...
修复
第二个this so answer为左列固定定位...
希望对您有所帮助！
我正在设计的页面有一个固定的 header，在它下面的行中有两个 Bootstrap 列，.col-md-2 和 .col-md-10。
我正在尝试将 header 固定到页面顶部并将其下方行中的左列 (.col-md-2) 固定到其位置，但是当我尝试设置 position: fixed; 在 CSS 的 header 和左栏中，我的页面的整个位置都乱七八糟。
有什么方法可以安全地锁定在Bootstrap中某列的位置，而不会丢掉整个页面和保持Bootstrap的经典响应能力？
编辑：这是一个 really, really bad demo but it may give you a better idea of what I'm trying to do. Here is a diagram
HEADER 的部分我想固定在顶部， ABOUT ME 的部分我想固定在左侧的响应栏中， [=17 的部分=] 我想在允许滚动的右侧的响应式而非固定列中。
我现在拥有的解决方案的一个问题是，当我尝试减少 browser-width 右侧列中的所有文本时，它会被弄脏，并且不会像 Boostrapped 列那样工作根本。
将 .hidden-xs 添加到您的 .col-md-4 并将 .col-xs-12 添加到您的 .col-md-8
一旦在较小的设备上，这将隐藏左侧的 col-4 并让您的 col-8 保持其位置低于 header...希望您不需要保留 col-4 (? )
编辑：我假设你打错了，第 8 列是右列而不是左列...
您正在寻找的解决方案是 2 个演示的组合：
第一个顶部导航栏（在您的情况下将是 header）由 bootstrap here...
修复第二个this so answer为左列固定定位...
希望对您有所帮助！