html - Bootstrap 侧导航栏固定

Question

我有这段代码，并希望它即使在向下滚动时也始终可见:

 .sidenav {
            padding-top: 20px;
            background-color: #f1f1f1;
            height: 100%;
        }

        @media screen and (max-width: 767px) {
            .sidenav {
                height: auto;
                padding: 15px;
            }
            .row.content {height:auto;} 
        }
        /* Remove the navbar's default margin-bottom and rounded borders */ 
        .navbar {
            margin-bottom: 0;
            border-radius: 0;
        }

        /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
        .row.content {height: 450px}

        body { padding-top: 45px; }

<div class="container-fluid text-center">    
        <div class="row content">
            <div class="col-sm-2 sidenav">
                <p><a href="#">Link</a></p>
                <p><a href="#">Link</a></p>
                <p><a href="#">Link</a></p>
            </div>

https://jsfiddle.net/kuukdn9u/

有什么建议吗？

Answer 1

如果您希望两侧栏都可见:

将名为 sidenav-left 和 sidenav-right 的广告 ID 分别应用于左侧和右侧的侧边栏。这将允许这两个元素受到新样式的影响。

使用 fixed 定位这些元素

将包含文本的div推离左侧边栏中间或远离左侧边栏，以防止在左侧边栏应用position fixed时重叠

您可以使用下面的这些规则

.text-center {
  left: 150px;
}

#sidenav-left {
  position: fixed;
  width: 150px;
  left: 0
}

#sidenav-right {
  position: fixed;
  right: 0;
}

see codepen here