html - 将图像放在 Navbar Bootstrap 旁边

Question

编辑 #1:这是问题的图片:

编辑 #2:这是我使用品牌类后的图片

编辑#3:

我正在尝试将图像 float 到导航栏旁边。它一直有效，直到我的导航栏宽度达到 100%。然后导航栏位于图像下方。

这是我的 HTML:

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="Brand" class="pull-left" src="Images/logo.png">
          </a>
        </div>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        </button>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Internet</a></li>
                <li><a href="#">Phone</a></li>
                <li><a href="#">Android TV</a></li>
                <li><a href="#">Shaw Direct</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
    </div>  
    </div>
</nav>

这是我的 CSS:

.Navlinks {
    font-size: 24px;
    color: white;
    padding-top: 50%;
    vertical-align: middle;
}
.Navlinks:hover {
    color: white;
}
.Navlinks:focus {
    color: white;
}
.navbar-default {
    background-color: #00AEFE;
    height: 89px;
}

.nav.navbar-nav li a{
    color: white;
    font-size: 18px;
}

有没有办法确保这两个可以并排漂浮？

Answer 1

官方文档中有一个例子:

<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>

https://getbootstrap.com/components/#navbar-brand-image