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。”

因此，您试图避免在HTML中添加.navbar和.nav类（等），方法是将它们作为mixins包含在id选择器中。这可能似乎适用于.navbar-inverse和.navbar-fixed-top（我实际上怀疑在应用这些时会有轻微的不一致，我稍后会解释），因为这样做的主要内容是为他们应用的特殊元素。

您的问题是navbar.less file of bootstrap使用的所有其他相互关联的选择器组合。简单地添加.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;
}

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

回想一下，mixin 不会导致类应用到元素，仅会导致该类的属性在您的选择器中包含。

您需要将引导文件中的组合选择器组合的每个实例转换为您的选择器，这比简单地将类添加到HTML更加困难他们应该在哪里。

返回有关似乎有效的说明。我怀疑你的代码中没有提到这些关系，因为你的HTML中没有.navbar-fixed-top .navbar-inner类关系：

.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);
}

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

1 个答案:

你似乎误解了Mixins