12

我想在我的网站左侧创建粘滞侧导航栏。& 我正在使用 Bootstrap 3 RC2。我不知道如何创建它。

4

3 回答 3

11

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

例如，

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

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

于 2013-09-03T17:19:59.567 回答
8

由于词缀插件，您所引用的粘性导航栏是可能的。您可以在此查看引导文档。

这个Jsfiddle包含一个有效的粘性侧边栏（使结果窗口更大以使其正常工作）。继续阅读以创建相同的侧边栏。

1. 为您的侧边栏创建 html。对于此示例，我们将在井中使用引导程序 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()
  }
});

您需要用侧边栏上方的任何内容替换“标题”。如果您使用的是引导导航栏并且它位于侧边栏的正上方，请将“header”替换为您用于导航栏的类，例如：

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;
  }
}
于 2013-12-14T10:54:30.967 回答
1

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

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

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

于 2013-09-02T18:17:44.103 回答