把照片旁边导航栏引导

Question

编辑＃1：这是问题的一个画面：

编辑＃2：这是一个图片后，我使用的品牌类

编辑＃3：

我想浮动图像旁边的导航栏。它工作，直到我有导航栏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

Answer 2

这个答案是基于@Serg Chernata答案

你的标识必须是透明的，如果是这样比我的大了什么你想，也许一个css风格width或height到<img>标签是必要的。像navbar-brand > img {height: 40px;}

你也应该移动<button>到<div class="navbar-header">到移动设备的导航栏切换按钮的正确定位。

.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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    <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>