活动和导航按钮具有带引导程序的奇怪填充

Question

我试图找出如何使用带有引导程序的导航按钮，如果它们在<li class="active">旁边的边缘错误，它们看起来有点不合适。< / p>

<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）