5

我一直在尝试将在 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>

正在应用 and ，navbar-inverse但and不起作用。navbar-fixed-topnavbarnav

4

1 回答 1

8

看来你误解了 Mixins

我认为您的主要问题在于您自称的目标：“我一直在尝试将在 HTML 中包含类的 Bootstrap 示例转换为使用 LESS 混合。”

因此，您试图通过将它们作为混合包含在您的选择器中来避免在您的 HTML 中添加.navbar和类（等） 。这似乎适用于并且（我实际上怀疑在应用这些方面存在轻微的不一致，我将在稍后解释）因为它们所做的主要事情是为它们应用的特定元素添加一些样式。.navid.navbar-inverse.navbar-fixed-top

您的问题是bootstrap 的 navbar.less 文件使用的所有其他相互关联的选择器组合。简单地添加.navbarand .navas 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关系。因此，没有一个组合选择器代码被拾取。

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

您需要将引导文件中组合选择器组合的每个实例都转换为您的选择器，这比简单地将类添加到应该在的 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);
}
于 2013-04-11T12:49:55.603 回答