问题与手机导航栏

编辑＃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

问题与手机导航栏

回答

相关问题