Question

这是正常bootstrap 3导航项的摘录：

 <li><a href="#">Action</a></li>

我遗漏了无关紧要的东西。

现在在我的情况下，我需要将一个的菜单项放在div中：

<li> <div> <a href="#">Action</a> </div> </li>

这个问题在于它只是在导航栏中的错误位置呈现一个简单的无样式链接，没有像第一个例子中那样以常规引导菜单项的方式设置样式或位置。

这就是我所需要的，只是在一个div中，只不过是你在那里看到的。

我知道我可以编辑Bootstrap css并添加一个适应这个规则的规则，但如果可能的话我真的想避免这种情况。

我必须这样做的原因是使用Angular.js和动态菜单选项以及ng-if元素，但简而言之，有一种相对简单的方法可以强制div中的链接设置相同的样式其他bootstrap 3导航项目？

Answer 1

简短的回答是否定的，如果您更改标记，则需要更改样式。 Bootstrap使用许多子选择器来执行它的脏事务，但其中很少可能适用于您的特定情况。对于example，单级导航可能如下所示：

<ul class="nav nav-tabs">
  <li class="active"><div><a href="#">Home</a></div></li>
  <li><div><a href="#">Profile</a></div></li>
  <li><div><a href="#">Messages</a></li>
</ul>

所以你要覆盖3种风格：

.nav-tabs>li>div>a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 4px 4px 0 0;
}
.nav>li>div>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav-tabs>li.active>div>a, .nav-tabs>li.active>div>a:hover, .nav-tabs>li.active>div>a:focus {
  color: #555;
  background-color: #FFF;
  border: 1px solid #DDD;
  border-bottom-color: rgba(0, 0, 0, 0);
  cursor: default;
}

但是，我建议在源头攻击这个。如果您希望在Angular中使用Bootstrap组件，那么我会尝试利用Bootstrap UI。

样式丢失在div内的Bootstrap 3导航项目上

1 个答案: