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放在左侧边栏的中间或远处以防止重叠，当位置固定应用于左侧边栏时

您可以使用以下这些规则

.text-center {
  left: 150px;
}

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

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

see codepen here

Bootstrap Side Navbar已修复

1 个答案: