语义引导导航栏 - sass [关闭]答案

【问题标题】：Semantic bootstrap navbar - sass [closed]语义引导导航栏 - sass [关闭]
【发布时间】：2015-10-08 09:47:29
【问题描述】：

起点：

使用 bootstrap-sass（指南针）
具有以下 html 标记（无法更改）

<div class="some">
  <ul>
    <li><a href="#" class="inactive">Item1</a></li>
    <li><a href="#" class="active">Item2</a></li>
    <li><a href="#" class="inactive">Item3</a></li>
  </ul>
</div>

是否可以将上述样式（使用 sass-bootstrap）设置为没有“品牌徽标”且不更改 html 的导航栏 - 例如语义上？

【问题讨论】：

“品牌标志”是什么意思？引导类名称？
这个问题不清楚，你想达到什么目的？您的代码中没有brand-logo。请包含更多相关代码并更好地解释您希望输出的内容。
@TinyGiant 这个问题不是很好（错过了 OP 已经尝试过的内容），但如果有人知道 twitter-bootstrap，他就会知道导航栏中的“品牌”是什么。

标签： css twitter-bootstrap sass compass-sass

【解决方案1】：

我认为我们需要查看更多代码，但如果没记错的话，您正在使用标准的 Twitter 引导菜单。如果是这样，您“可以”使用该类对其进行样式设置，并且不显示代码中的品牌徽标。如果您可以从 HTML 中删除品牌徽标，那就更容易了

【讨论】：

【解决方案2】：

如果您只想要样式，只需使用想要的样式，例如：

.some {
    @extend .navbar;
    @extend .navbar-inverse;
}
.some {
    ul {
        @extend .nav;
        @extend .navbar-nav;
        @extend .navbar-right;
        > li a.active {
            &,
            &:hover,
            &:focus {
                color: $navbar-inverse-link-active-color;
                background-color: $navbar-inverse-link-active-bg;
            }
        }
    }
}

例如以上将为您的 div/ul 设置样式以获得右对齐的反向导航栏 - 所有样式都与引导程序中的一样。

我没有测试 javascript - 它可能会失败，因为它会搜索 navbar - 但上面的简单样式有效。

对于li > a.active 部分：我只是直接从 bootstrap-sass 复制它，因为 bootstrap 使用 active 作为 li 元素而不是 a 元素，所以你需要完全设置a.active 的样式。

此外，它并没有折叠到按钮中，而只是将其布局更改为垂直列表。

“品牌”将被自动排除，因为它不在标记中。

【讨论】：

正是我想要的。