Question

在Twitter Bootstrap v.2.3.2 navbar.less文件中，您可以找到以下代码：

// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: @navbarLinkColorActive;
  text-decoration: none;
  background-color: @navbarLinkBackgroundActive;
  .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
}

现在，问题是＆＃39;是我的＆＃39; li＆＃39;没有班级.active，但.current-menu-item。但我仍然想将上述CSS应用于a元素。所以在我自己的style.less文件中，我添加了：

li.current-menu-item a {
  .navbar .nav > .active > a;
}

但由于某种原因，这不起作用。我无法弄清楚它为什么不起作用。为了说明，我想举一个IS工作的例子。

在Twitter Bootstrap v.2.3.2中，您可以找到具有以下代码的type.less：

// Single-line list items
ul.inline,
ol.inline {
  margin-left: 0;
  list-style: none;
  > li {
    display: inline-block;
    .ie7-inline-block();
    padding-left: 5px;
    padding-right: 5px;
  }
}

对于水平菜单，源代码中我的ul元素没有类.inline，但是.menu，我只是在我自己的style.less中执行此操作：

ul.menu {
   ul.inline;
}

根本没有任何问题。有人可以帮帮我吗？

Answer 1

afaik，你的

ul.menu {
   ul.inline;
}

代码也不起作用。

您的问题与Overwriting Twitter Bootstrap Less not working, adding new things does work

非常相似

你只能混合简单的类。

请尝试以下少量代码：

li.current-menu-item a {
  &:extend(.navbar .nav > .active > a);
}

另见：http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin

将Twitter Bootstrap LESS应用于我自己的.less样式表不起作用

1 个答案: