Question

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

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

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

angular.module('pedidos').factory('adminPedidos', ['$http', function ($http) {
  return {
      getAll: function () {
        return $http.get('all'); // or change all to http://localhost:3000/all
      }
   };
}]);

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

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

Answer 1

据我所知，您应该将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>

Answer 2

我注意到你使用col-md-3（和col-md-9）你尝试过使用col-xs-3（和col-xs-9）吗？

Answer 3

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

让我们说我们有两个元素

<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元素的位置固定到左边并防止它滚动。我通过使用＆＃39; fixed＆＃39;将position属性添加到查询中来实现此目的。值。

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

检查代码，然后根据自己的需要调整屏幕尺寸，但它适合我。享受周末小伙伴。数字hi-5

仅供参考，如果这对您不起作用，那么您很有可能会体验到我第一次做的事情，并使您的CSS更加合格。例如，不要将样式设置为.classname {position：fixed;}而是使用特殊规则和firefoxes firebug工具之类的东西。点击元素（如果你也需要）并完全符合你需要的css，例如

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

在您的示例中，您可能需要指定一点或多或少，每个人的标记会有所不同：）

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

3 个答案: