Question

我有一个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 -->

Answer 1

我找到了解决方案。

要立即居中文本，请从

更改CSS选择器

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

到

div.navbar-collapse.navbar-ex1-collapse

以导航栏折叠链接为中心时延迟（1秒）

1 个答案: