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

我想在“我的网站”的左侧创建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。

 
 
 
 
 
Link 1
 
Link 2
 
 
  
  
 
Main body content goes here
 
  
  

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的默认Navbar是水平的。 它有四种类型，默认，静态顶部和固定的顶部和底部，请参见本页的示例部分： http ： //getbootstrap.com/getting-started

但是当然你可以使用Twitter的Bootstrap 3来构建（左）侧导航。 请先阅读文档，其中包含许多示例。 勾勒出你的想法，试着用例子来编写它。 在此提出问题以解决代码问题。 首先可以从词缀（ http://getbootstrap.com/javascript/#affix ）和导航部分（ http://getbootstrap.com/components/#nav ）开始。

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