Html 如何在一个导航栏中显示3行文字<;李>;
我想要实现的导航栏看起来像这样Html 如何在一个导航栏中显示3行文字<;李>;,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我想要实现的导航栏看起来像这样 +--------------------------------------------+ + navbar-brand img | | | Link 1 | + navbar-brand img | Home | About | Link 2 | + navbar-brand img | | | Link 3 | +--------------------------------------------+
+--------------------------------------------+
+ navbar-brand img | | | Link 1 |
+ navbar-brand img | Home | About | Link 2 |
+ navbar-brand img | | | Link 3 |
+--------------------------------------------+
此外,主页和关于链接比右侧的三个链接大一点。现在,我在.navbar nav li a
中添加了行高和高度,以增加navbar的高度
这是当前的HTML:
<div id="header" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-brand">
<img src="img/logo.jpg"/>
</div>
<button type="button" class="navbar-toggle toggleButton" data-toggle="collapse" data-target="#navbarmenu">
<i class="fa fa-bars fa-2x"></i>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
-
实现这一目标的最佳方式是什么?谢谢 使用
显示:块
使链接占据整个宽度,并添加垂直对齐:中间
,使所有元素垂直居中:
.navbar-nav {
display:inline-block;
}
.navbar-nav li {
display:inline-block;
vertical-align:middle;
}
.navbar-nav li a {
display:block;
}
您可以看到一个使用此小提琴的演示:请提供您的CSS代码。@roNn23以下是