Bootstrap Navbar對齊

Question

很抱歉，如果我的問題的答案真的很簡單，但事實確實如此。 因此，我需要在網頁標題中放置一個圖像和導航欄，並使它們對齊，以便圖像在左側，導航欄在右側。 我嘗試過更改“浮動”屬性，但是導航欄和圖像仍然堆疊在一起。 下圖有望顯示您的意思。

這是我的HTML代碼：

<header>
  <img src="White Logo.png" id="logo"/>
  <div class="container">
    <nav class="navbar navbar-default" id="mNavbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
  <a href="#start"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</header>

這是圖像（框是徽標所在的位置）： 圖像1

Answer 1

如官方Bootstrap文檔中所述 ，您需要用所選的圖像替換navbar-brand中使用的文本。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

定位標記后的圖像標記是您要放置圖像的位置。

導航欄標記的頂部應如下所示：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

在其中看到“品牌”文字的​​位置，您將在其中放置圖片。