引导固定侧边栏导致主要内容重叠

我是一个新手，当涉及到Bootstrap和一般的CSS。我想要一个带有固定侧边栏，固定顶部导航和滚动主要内容的网站。引导固定侧边栏导致主要内容重叠

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

我使用的是基本的网格布局：

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

我曾尝试将边缘的主要内容的左推过来，但是当调整到更小的设备，它看起来太可怕了。

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

来源

2015-11-28 AngularBoy

据我所知，你应该添加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>

来源

2015-11-28 10:43:00 Heidel

我尝试这样做，并没有解决我的问题。 – AngularBoy

我注意到你正在使用COL-MD-3（和COL-MD-9）你尝试使用col-xs-3（和col-xs-9）？

来源

2016-01-03 21:24:44 Julaine

右键男孩我已经解决了这个小坏小子你，我会给你我的标记示例

比方说，我们有两个元素

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

对于那些谁承担增加这么贴sidenav /侧边栏元素忘了它，这只会让事情在背后变得很痛苦。你不需要使用添加的插件，当然也不需要长时间的思考，并且写一个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元素的位置固定到左侧并防止它滚动。我通过将“固定”值添加到查询的位置属性来实现此目的。

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

检查代码，只是玩弄屏幕尺寸，因为你觉得合适，但它为我工作。享受你的周末小伙子。数字嗨5

仅供参考如果这不适合你，那么你很有可能经历了我第一次做的事情，并使你的css更加有效。例如，不要只使用.classname {position：fixed;}而是使用特殊的裁决和类似firefoxes的萤火虫工具。点击元素（如果你需要的话），并完全符合你所需要的CSS，例如

而不是这个.sidenav {position：fixed} do this div.sidenav.col-sm-3 {position ：固定}

在您的例子，你可能需要指定一个多多少少有点，每个人的标记会有所不同:)

来源

2016-11-20 16:53:13 Nick

引导固定侧边栏导致主要内容重叠

回答

相关问题