Question

这应该很简单，但我遗漏了一些东西。

我在新的导航栏中添加了一个自举网站，看起来像这样

http://codepen.io/davidcochran/pen/Dihnl

然而，当我实际将它实现到我的引导程序站点时，它拒绝居中。

<header role="banner" id="logo-main1"><div id="everything">
  <img id="logo-main1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo">
  <nav id="navbar-primary" class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-primary-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" --></div>

CSS

.header[role="banner"] {
  #logo-main {
    display: block;
    margin: 20px auto;
  }
}

#navbar-primary.navbar-default {
  background: transparent;
  border: none;
  .navbar-nav { 
    width: 100%;
    text-align: center;
    > li {
      display: inline-block;
      float: none;
      > a {
        padding-left: 30px;
        padding-right: 30px;
        }
    }
  }
}
.logo-main1 {
    text-align: center
}

它看起来像这样：

!!!链接被删除，直到进一步检查!!!

Answer 1

另一个css减速可能会超越选择器和减速度（下方），使导航栏居中。

#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;

Bootstrap Nav徽标问题

1 个答案: