把照片旁邊導航欄引導

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>