html - 使用 Bootstrap 导航

Question

我使用 Twitter-Bootstrap 创建了一个导航栏，但我在导航时遇到了问题。我想创建导航，其中 nav 位于左侧，我的 Logo 位于右侧。我用 vertical-align:middle; 创建了 .nav-head-middle div；并显示:内联 block ；这样我的导航和 Logo 在同一行上(即中间)。

我的导航和 Logo 在同一行，但我的问题是我的 Logo 不在右边。

---

HTML

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="nav-head-middle">
            <ul class="nav navbar-nav nav-adelva">
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">PARTNERS</a></li>
                <li><a href="#">CLIENTS</a></li>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">CAREER</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>   
        </div>
        <div class="nav-head-middle">
              <div class="navbar-right">
                 <img src="image/logo.png" />
              </div>
        </div>
    </div> <!--/container -->
 </div>  <!--/navbar -->

CSS

.nav-head-middle{
     display:inline-block;
     vertical-align:middle;
  }

Answer 1

您的问题可能在于没有指定第一组导航选项卡向左浮动。

在 CSS 中，你需要告诉左边的部分“向左走”，右边的部分“向右走”。

在您的情况下，使用 Bootstrap 时，您应该利用内置代码来创建额外的自定义 CSS。应该有帮助的内置类是“navbar-left”和“navbar-right”。

不确定这个 HTML 是否适合您，或者它是否有助于解决您的问题，但我认为 html 代码应该更接近于此:

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

          <ul class="nav nav-navtabs navbar-left">
             <li><a href="#">HOME</a></li>
             <li><a href="#">ABOUT US</a></li>
             <li><a href="#">SERVICES</a></li>
             <li><a href="#">PARTNERS</a></li>
             <li><a href="#">CLIENTS</a></li>
             <li><a href="#">NEWS</a></li>
             <li><a href="#">CAREER</a></li>
             <li><a href="#">CONTACT</a></li>
          </ul>

          <ul class="nav nav-tabs navbar-right">
             <li><img src="image/logo.png" /></li>
          </ul>

    </div> <!--/container -->
 </div>  <!--/navbar -->