我使用Bootstrap v3.3.6创建模板。 这里是我的模板的一部分:Bootstrap 3 navbar将顶部菜单项固定为图像
正如你可以看到我已经导航栏固定在顶部和我也有嵌入<li></li>
标签之间图标或只是图像的菜单项,用户信息图标和齿轮图标。
我不确定的是,如果我正确地做到了这一点,我的意思是有一个特殊的类在bootstrap中,专门用于要插入图像的菜单项。也许这些图像不应该在那里。
另一个问题是,如果我应该把我的标志图像放在<a class="navbar-brand"></a>
里面?如果我尝试在高度超过导航栏高度的情况下插入更大的徽标图像,则徽标图像未正确居中。正确更改导航栏高度以及如何在导航栏中垂直居中放置图像最简单的方法是什么?
(也许这就是太多的代码,但是我想确保我的问题是不缺任何东西),其中两个图像插入导航项目相关
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Workout.lt</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Vardenis Pavardenis</a>
</li>
<li>
<a href="#"><img src="images/user-info.png"></a>
</li>
<li>
<a href="#"><img src="images/user-gear.png"></a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Atsijungti</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Glyphicons或Font-awesome通常用于像这样的图像。 – Sam