html - Active 和 navbutton 有奇怪的 Bootstrap 填充

Question

我正在尝试弄清楚如何将导航按钮与 Bootstrap 一起使用，目前，如果它们位于 <li class="active"> 旁边，它们看起来有点不合适。页边距错误。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="#">Hjortefjellet</a>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
      <li> <p class="navbar-btn"> <a href="#" class="btn btn-default">TTT</a></p></li>
        <li class="active"><a href="#">Hjem</a></li>
        <li><a href="#">Doner</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Kontakt oss</a></li>
        <li><a href="#">Om oss</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Hjem</a></li>
        <li><a href="#">Doner</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Bootjson

我想您明白我希望所有页面的边距都相同，因此更改导航栏按钮的边距不会那么好。

Answer 1

像这样？

.navbar-btn {
margin-right: 8px;
}

更具体:

ul.nav p.navbar-btn {
margin-right: 10px;
}

您可能需要在按钮右侧添加边距，因为 li 就在它旁边。但除非它处于事件状态，否则您不会看到它 - 因为它在事件时会获得背景颜色。

还有其他解决方案，但最后您需要始终在它们之间留出更多空间，或者仅在菜单项处于事件状态时才需要——这看起来很尴尬。

(Godt å se at det er noen norske innom her)