Bootstrap 固定侧边栏导致主要内容重叠答案

【问题标题】：Bootstrap fixed sidebar causes main content to overlapBootstrap 固定侧边栏导致主要内容重叠
【发布时间】：2016-03-02 10:07:29
【问题描述】：

一般来说，我是 Bootstrap 和 css 的新手。我想要一个具有固定侧边栏、固定顶部导航和滚动的主要内容的站点。

导航栏已修复且工作正常。侧边栏和主要内容的布局也很好。当我将侧边栏设置为固定时，问题就来了。主要内容与侧边栏重叠。

我正在使用基本的网格布局：

<div class="container">
    <div class="col-md-3 affix">
       sidebar is here
    </div>
    <div class="col-md-9">
        main content
    </div>
</div>

我尝试在主要内容的左侧添加一个边距以将其推过，但在调整到较小的设备时看起来很糟糕。

在保持响应能力的同时实现固定侧边栏的正确方法是什么？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

正确的男孩，我已经为你解决了这个小坏男孩，我会给你一个我的标记示例

假设我们有两个元素

<div class="sidenav col-sm-3"></div>
<div class="main-content col-sm-9"></div>

对于那些假设添加附加以便sidenav / sidebar元素忘记它的人来说，这只会让事情变得很痛苦。你不需要使用附加的插件，当然也不需要按照我的想法写一个 jquery 插件来切换 sidenav 元素类。

解决方案很简单，它只是围绕媒体查询和一个非常小的 css 更改（我知道的）。在我的示例中，我希望我的 sidenav 元素不会在高于移动屏幕的任何内容上滚动，因此简单的解决方案是添加这两个媒体查询。

/* On small screens, set height to 'auto' for sidenav and grid
================================================================================= */
@media screen and (max-width: 767px) {
  .sidenav {

    height: auto;
    padding: 15px;
  }
  div.sidenav.col-sm-3{
        position:static;

  } 

}

/* On Larger Screens
================================================================================= */

    @media screen and (min-width: 1200px) {

        div.sidenav.col-sm-3{
            position:fixed;

        } 

    }

简而言之，我只是添加了两个媒体查询来解决问题。我们都想得太复杂了。好吧，我们中的任何人以前都没有尝试过。

我添加的第一个查询是告诉所有更大屏幕的设备我想将我的 sidenav 元素的位置固定到左侧并防止它滚动。我通过使用“固定”值将位置属性添加到查询中来实现这一点。

第二个查询只是将移动设备的此属性值重置为“静态”。对于任何不知道任何定位元素的默认值的人来说都是静态的。

检查代码并随意调整屏幕尺寸，但它对我有用。享受你的周末小伙子们。数字hi-5

仅供参考，如果这对您不起作用，那么您可能会体验到我第一次做的事情，并让您的 css 更有资格。例如，不要仅仅将样式设置为 .classname{position:fixed;} 而是使用特异性规则和类似 firefoxes firebug 工具的东西。单击元素（如果您也需要）并根据需要完全限定您的css，例如

而不是这个 .sidenav{position:fixed} 这样做 div.sidenav.col-sm-3{position:fixed}

在您的示例中，您可能需要指定更多或更少，每个人的标记都会有所不同:)

【讨论】：

【解决方案2】：

我注意到您正在使用 col-md-3（和 col-md-9）您是否尝试过使用 col-xs-3（和 col-xs-9）？

【讨论】：

【解决方案3】：

据我所知，您应该将affix 添加到col-md-3 内的div 中

<div class="container">
<div class="row">
    <div class="col-xs-3"> 
        <div id="myAffix" class="list-group" style="width:150px;">
            <a href="#section1" class="list-group-item">Section1</a>
            <a href="#section2" class="list-group-item">Section1</a>
            <a href="#section3" class="list-group-item">Section1</a>
        </div>
    </div>

    <div class="col-xs-9">
    </div>
</div>

【讨论】：