Question

我试图在导航带中使用导航栏和标题修复侧边栏。

我有以下结构：

<html>
<head>...</head>

<body>

        <div class="page-header custom-header">
                <center>
                        <h1>Example Page Header</h1>
                </center>
        </div>

        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                        <div class="navbar-header">
                                        ....
                        </div>

                        <div id="navbar" class="navbar-collapse collapse">

                                        <ul class="nav navbar-nav">
                                                <li>...</li>
                                                <li>...</li>
                                                <li>...</li>
                                        </ul>

                                        <ul class="nav navbar-nav navbar-right">
                                                <li>...</li>
                                                <li>...</li>
                                                <li>...</li>
                                                <li>...</li>
                                        </ul>
                         </div>
                </div>
        </nav>

        <div id="wrapper" class="toggled">
                <div class="container-fluid">
                                    <!-- Sidebar -->
                                <div id="sidebar-wrapper">
                                    <ul class="sidebar-nav">
                                                <li>...</li>
                                                <li>...</li>
                                                <li>...</li>
                                                <li>...</li>
                                    </ul>
                    </div>
                    <!-- /#sidebar-wrapper -->


                    <br/><br/><br/>


                    <div id="page-content-wrapper">
                        <div class="container">


                                <div class="row">

                                    <div class="col-xs-6"  style="background-color:lavender;">...</div>

                                    <div class="col-xs-7" style="background-color:lavenderblush;">...</div>
                                    <div class="col-xs-6" style="background-color:lavender;">...</div>
                                </div>
                        </div>
                    </div>
                </div>
        </div>
</body>
</html>

侧边栏和导航栏可以固定，而标题我遇到问题。如果导航栏已修复，则标题会随内容向下滚动。我尝试添加

top: 0;
position: fixed;

但它只会导致侧边栏重叠标题。

这是我的jsfiddle。任何帮助表示赞赏。

Answer 1

通过更改以下CSS，这是一个好的开始：

.page-header {
    padding: 20px 0 20px;
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 0;
    margin: 0;
    background: #fff;
    width: 100%;
    display: block;
    z-index: 1;
}


#wrapper.toggled {
    padding-left: 250px;
    margin-top: 100px;
}

仍然需要对不同的视口进行一些调整，从移动设备开始然后设置样式。

https://jsfiddle.net/fyzyc54k/4/

Bootstrap固定侧杆和割台

1 个答案: