在Bootstrap 3.0中创建粘性侧导航栏

Question

我想在"我的网站"的左侧创建Sticky Side Navbar.我正在使用Bootstrap 3 RC2.我不知道如何创建它.

Answer 1

您需要为侧栏固定时定义CSS ...

例如,

#sidebar.affix {
    position: fixed;
    top:25px;
    width:228px;
  }

这是一个工作示例:http://bootply.com/73864

Answer 2

借助于附加插件,您可以使用粘性导航栏.您可以在此查看引导文档.

这个Jsfiddle包含一个工作粘性侧边栏(使结果窗口变大,看它是否正常工作).继续阅读以创建相同的侧边栏.

1.为侧边栏创建html.对于这个例子,我们将在井内使用bootstraps nav-pills.

<div class="row">
  <div class="col-sm-3">
    <div class="well bs-sidebar affix" id="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div> <!--well bs-sidebar affix-->
  </div> <!--col-sm-3-->
  <div class="col-sm-9">
    <p>Main body content goes here</p>
  </div> <!--col-sm-9-->
</div> <!--row-->

2.在js文件中调用affix插件

$('#sidebar').affix({
  offset: {
    top: $('header').height()
  }
}); 

您需要将"标题"替换为侧边栏上方的内容.如果您使用的是自举导航栏并且它位于侧边栏的正上方,请将"标题"替换为您用于导航栏的类,例如:

top: $('.navbar navbar-default').height()

3.为词缀类添加css

用于无响应布局的CSS

.bs-sidebar.affix {
  width: 263px;
  top: 25px;
}

用于响应式布局的CSS

@media (min-width: 768px) {
  .bs-sidebar.affix {
    width: 158px;
    top: 25px;
  }
}

@media (min-width: 992px) {
  .bs-sidebar.affix {
    width: 213px;
    position: fixed;
    top: 25px;
  }
}

@media (min-width: 1200px) {
  .bs-sidebar.affix {
    width: 263px;
  }
}

Answer 3

Twitter Bootstrap 3 的默认导航栏是水平的。它有四种类型，默认、静态顶部和固定顶部和底部，请参见本页的示例部分：http://getbootstrap.com/getting-started

当然，您可以使用 Twitter 的 Bootstrap 3 构建（左侧）侧导航。请先阅读文档，它包含很多示例。画出你的想法的草图，尝试用示例进行编码。在此提出问题以排除代码故障。也许首先从词缀（http://getbootstrap.com/javascript/#affix）和导航部分（http://getbootstrap.com/components/#nav ）开始。

也许还检查：如何使画布导航重叠内容引导而不是移动它