問題與手機導航欄

編輯＃1：經過我給我的高度89px的定義，我的手機菜單似乎揹着我的內容。問題與手機導航欄

我有我的導航欄的移動版本的問題。導航欄不像標識那樣高，所以當我點擊它時，我的「主頁」菜單項不會顯示，除非我將它懸停在它上面。

這裏的圖片，這兩個問題：

這裏是我的HTML：

<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="navbar-header"> 
       <a class="navbar-brand " style="margin-top: -15px; float: left;" href="#"> 
       <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png"> 
       </a> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <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> 
    </div> 
</nav>

這是我的CSS：

.navbar-default { 
    background-color: #00AEFE; 
} 

.nav.navbar-nav li a{ 
    color: white; 
    font-size: 18px; 
    line-height: 50px; 
} 
.col-xs-0 { 
    display: none; 
} 
nav { 
    height: 89px; 
}

來源

2016-12-29 Thomas Hutton

你給的CSS沒有顯示任何問題。那還不夠。添加完整的CSS – ab29007

你想達到什麼目的？ –

@kittyCat目前，這是我唯一的CSS。 –

在引導navbar-brand有一些填充，也<img>的height應該由額外的CSS像navbar-brand img {height:40px}得以控制。

但如果我們能看到你的生活HTML，很高興。

EDITED

使用這個CSS給予一定的高度超過100像素一樣或更高圖像的高度

@media (min-width: 768px) { 
    .navbar-header { 
     height: 100px; 
    } 
    }

OR 如果你不想改變的高度導航欄頭，您可以添加一些填充到導航欄，切換按鈕，它會增加導航欄頭的高度：

@media (min-width: 768px) { 
    .navbar-toggle { 
     padding: 33px 10px; 
    } 
    }

來源

2016-12-29 15:34:54

https://plnkr.co/edit/EjoTv1ZGkwdVesOetFJ1的最大高度CSS？p =預覽 –

在這個例子中沒有標誌圖片，因爲它已經定位。所以告訴我你的標誌圖片的高度有多少？如果它長於'50px'，那麼你應該把它縮小到'40px'左右 –

這是一張300x89的圖片。 –

<a class="navbar-brand " style="margin-top: -15px; float: left;height:auto" href="#"> 
      <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png"> 
</a>

更改導航欄，品牌類的高度

<style> 
    .navbar-brand img { 
    max-height: 40px; 
    width: auto; 
    } 

    </style>

來源

2016-12-29 15:33:49 Arun

但是，這不就是使圖像更小，並扭曲？ –

你可以設置圖片和寬度自動 – Arun

問題與手機導航欄

回答

相關問題