css - 如何获得 Bootstrap 固定导航列表样式？

Question

我使用 Bootstrap 已经有一段时间了。虽然我总是能够让一切正常工作。我一直在考虑将它用于一个即将进行的元素，该元素需要一个与 Twitter Bootstrap doc. 中存在的完全一样的附加侧导航。

我什至尝试将这些类包含到我的元素中。

<ul class="nav nav-list affix-top">

这里的任何 Bootstrap 专家都可以帮助我弄清楚我需要添加什么才能使它们正常工作。此外，我一直无法让 V 形显示与那里完全一样，我的 V 形总是与文本混在一起。

Answer 1

你记得在JS中开启吗？

他们使用:

$('#navbar').affix()

，但您需要根据需要更改选择器。

啊，现在你已经改写了你想要的!

他们还有另一个名为 .bs-docs-sidenav 的类(class)

.bs-docs-sidenav {
    width: 228px;
    margin: 30px 0 0;
    padding: 0;
    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
    box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

然后他们将一个名为 active 的类添加到 li，然后在此处指定其行为:

.bs-docs-sidenav > .active > a {
    position: relative;
    z-index: 2;
    padding: 9px 15px;
    border: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
    box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}

简而言之，这不是 Bootstrap 的内置功能。<​​/p>