Question

我对bootstrap并不熟悉。我已经被困了一天，现在只是试图创建一个粘性侧边栏。目前我有一个使用affix bootstrap的子导航栏，例如：

顶部导航栏

<div id="top-nav" class="navbar navbar-inverse navbar-static-top" style="margin-bottom: 0;">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">BiddingTool</a>

        <div class="navbar-text">
            <ul class="navbar-nav list-inline">
                <li><a href="#" style="margin-left: 5px;"><i class="glyphicon glyphicon-road"></i> Projects</a></li>
                <li><a href="#" style="margin-left: 20px;"><i class="glyphicon glyphicon-list"></i> Database</a></li>
            </ul>
        </div>

    </div>
</div><!-- /.Navigation Bar -->

降低导航栏

<!-- Lower Navigation Bar -->
<div class="navbar-xs">
<div id="lower-nav" class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">&nbsp;</a>
    </div>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#"><i class="fa fa-group"></i> Labor</a></li>
            <li><a href="#"><i class="fa fa-tint"></i> Material</a></li>
            <li><a href="#"><i class="fa fa-wrench"></i> Equipment</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right" style="margin-right: 5px;">
            <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Logout</a></li>
        </ul>
     </div>
</div>
</div><!-- /.Lower Navigation Bar -->

我在CSS中使用了这个：

.affix { top: 50px; width:100%; }

和JS

$('.navbar-lower').affix({
  offset: {top: 50}
});

这是我的工作示例fiddle

我的问题是如何使用引导程序面板制作粘性侧边栏？

Answer 1

查看此更新的小提琴http://jsfiddle.net/5xEc3/1/

对于你的侧边栏Div我已经这样做了......

<div id="sidebar" class="panel panel-default" data-spy="affix" data-offset-top="60" data-offset-bottom="400">

data-spy="affix" data-offset-top="60" data-offset-bottom="400"是神奇的地方。你现在必须用CSS定位它。

Bootstrap 3粘左侧边栏

1 个答案: