html - 如何使用 Bootstrap 3 修复左侧菜单?

标签 html css twitter-bootstrap twitter-bootstrap-3

这是我的代码:

<body data-spy="scroll" data-target="#left-menu" data-offset="20">
    <div class="container">
        <div class="row">
            <nav class="col-sm-3" id="left-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li><a href="#installation">Installation</a></li>
                    <li><a href="#api">API</a></li>
                    <li><a href="#demo">Demo</a></li>
                </ul>
            </nav>
            <div class="col-sm-9" id="content">
                <div id="installation">
                   <h1>Installation</h1>
                   <!-- ... -->
                </div>
                <div id="api">
                   <h1>API</h1>
                   <!-- ... -->
                </div>
                <div id="demo">
                   <h1>Demo</h1>
                   <!-- ... -->
                </div>
           </div>
      </div>
   </div>
</body>

我希望在用户移动滚动条时固定左侧菜单。 我试过:

#left-menu {
     position: fixed;
}

它不起作用,因为 div#content float 在 #left-menu 上。

我错过了什么?

Bootstrap 3.3.6

最佳答案

已解决。我错过了 #contentmargin-left:

#content {
   margin-left: 25%
}

关于html - 如何使用 Bootstrap 3 修复左侧菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35487738/

相关文章:

html - 如何在 css hack/媒体查询中扩展 Internet Explorer?

javascript - Angular 2 的样式属性清理是否有安全的解决方法?

css - Safari 中的 Bootstrap 文本框高度问题

javascript - 获取 Google map 上标记的坐标

html - 如何在 Bootstrap block 之间设置更多空间?

javascript - 隐藏 .children 很容易 - 属于 <dt> 的 <dd> 怎么样

asp.net - 为什么这个加载 gif 布局问题

css - 如何使用灵活的布局将元素置于 Windows 8 [HTML5/JS/CSS3] 中

angularjs - Yeoman Angular 应用程序,grunt watch .less 文件

html - Bootstrap 4 : dropdown tab items can only be selected once