Question

我正在使用Bootstrap免费为某人建立一个网站。我在代码中有点业余，愚蠢地决定在我的标题导航中使用一个居中的徽标，这是我以前从未做过的。

导航目前按此布局。

    <nav class="navbar navbar-default">
    <div class="nav-border">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-    toggle="collapse" data-target="#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="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png" width="222" class="img-responsive"> </a> </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-left">
            <li><a href="/about-us/">About us</a></li>
            <li><a href="/our-service/">Our service</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/our-blog/">Our blog</a></li>
            <li><a href="/hire-us/">Contact</a></li>
          </ul>
        </div>

        <!--/.nav-collapse --> 
      </div>
    </div>
    <!--/.container-fluid --> 
  </nav>

这是CSS

.navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
}
.navbar {
    background: #012d52;
    border-radius: 0;
    border:none;
    font: 22px 'Playfair Display', serif;
    text-transform: uppercase;
    padding: 10px 0;
}
.nav-border {
    border-top: 1px solid #576e81;
    border-bottom: 1px solid #576e81;
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
    text-decoration: none;
}
.navbar-default .navbar-nav>li>a:hover {
    color: #acd1f0;
}
.navbar-brand {
    padding: 0;
    margin:0;
    z-index: 20;
}
.navbar-brand>img {
    height:auto;
    width: 222px;
    padding: 7px 14px;
    margin-top: -77px
}
.navbar-right {
    margin-right: 15%;
}
.navbar-left {
    margin-left: 15%;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 0;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
.navbar-default .navbar-toggle {
    border-color: #576e81;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #576e81;
}

点击两个单独的列表使得徽标处于中间位置略有变化，我不明白为什么。我尝试使用固定宽度改变/玩CSS来尝试找到解决方案，但我完全被难倒了！

代码基于something I found on Codepen

任何建议都会有很大的吸引力。

Answer 1

叹息......我刚想通了。

右侧的两个链接包含其页面上的内容，这些内容会导致浏览器滚动条出现，这会减小窗口的宽度。左侧的其他两个链接转到尚未添加任何内容的页面。

有趣的是，在您寻求帮助后，您总能找到解决方案！

点击导航链接时，中心品牌略有移动

1 个答案: