为什么.navbar mixin在Bootstrap 2.3中不起作用？

Question

我一直在尝试将包含HTML中的类的Bootstrap示例转换为使用LESS mixins.到目前为止,我已经成功了,但我的菜单遇到了问题.目前我在我的主.less文件中使用以下内容(我已经包含了bootstrap.less):

#container #menu {
    .navbar;
    .navbar-inverse;
    .navbar-fixed-top;

    div {
        .navbar-inner;
        ul { .nav; }
    }
}

和相应的HTML:

<div id="container">
    <nav id="menu">
        <div><ul role="menu">
            <!--- ... -->
        </ul>
        </div>
    </nav>
</div>

在navbar-inverse和navbar-fixed-top正在应用,但navbar并nav没有工作.

Answer 1

它似乎你误解了Mixins

我认为你的主要问题在于你自称的目标:"我一直试图将HTML中包含类的Bootstrap示例转换为使用LESS mixins."

所以你试图通过将它们作为mixin 包含在你的选择器中来避免在HTML中添加.navbar和.nav类(等)id.这可能似乎工作的罚款.navbar-inverse和.navbar-fixed-top(其实我怀疑有在应用这些轻微的不一致,稍后我将解释更多),因为主要的事情做的那些是添加一些造型,以它们应用到特定元素.

您的问题是bootstrap的navbar.less文件使用的所有其他相互关联的选择器组合.简单地添加.navbar和.nav作为mixins也只将这些类的样式应用于您正在混合的项目.它没有做的是识别导航功能正常所需的任何关系.例如,在bootstrap中获取此代码示例:

.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}

.navbar .nav > li {
float: left;
}

// Links
.navbar .nav > li > a {
float: none;
// Vertically center the text given @navbarHeight
padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
color: @navbarLinkColor;
text-decoration: none;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}

正是这些组合选择器使导航功能成为可能.但是在您的代码中,您.navbar .nav的HTML中没有#container #menu ul关系,您只有关系.因此,没有任何组合的选择器代码被拾取.

回想一下,一个混合不会导致该班被应用到的元素,它不仅会导致性能进行该类包含在你的选择.

您需要将引导程序文件中的组合选择器组合的每个实例转换为您的选择器,这比简单地将类添加到HTML应该更加困难.

回到关于什么似乎工作的说明.我怀疑你的代码中没有提到这些关系,因为你.navbar-fixed-top .navbar-inner的HTML中没有类关系:

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
  border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
  border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-left: 0;
  padding-right: 0;
  .border-radius(0);
}