0

我有一个 CSS 问题，我什至无法理解。我有一个带有标准折叠按钮的导航栏，单击该按钮时会显示多行链接。我有一个 CSS 媒体查询，它可以拉伸行并将链接居中，如下所示：

http://imageshack.us/a/img89/4940/t678.png

这是进行拉伸和居中的CSS：

/* when the navbar becomes a button, center and stretch the dropdown links */
@media (max-width: 992px) { 
  div.navbar-collapse.navbar-ex1-collapse.navbar-right.in {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
}

不幸的是，当您第一次按下可折叠按钮展开行时，文本不会居中显示。文本居中对齐需要整整 1000 毫秒（1 秒）。您可以从字面上看它从屏幕的最左侧到中心。

这让我相信我的 CSS 做错了什么。

我该如何解决这个问题？

的HTML：

<!-- navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- navbar header -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <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="#">
              <img class="img-responsive" src="assets/img/logo.png" >
            </a>
          </div>
          <!-- collapse -->
          <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Projects</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
  </nav>
<!-- /navbar -->
4

1 回答 1

1

我找到了解决方案。

要立即将文本居中而不延迟，请将 CSS 选择器从

div.navbar-collapse.navbar-ex1-collapse.navbar-right.in

到

div.navbar-collapse.navbar-ex1-collapse
于 2013-10-14T05:26:56.653 回答