我的页面导航部分有按钮。按钮处于无序列表标记中,以便:
<nav class="navbar navbar-inverse noPadding">
<div class="container-fluid">
<div class="navbar-header logo"></div>
<ul class=" nav navbar-left navbar-nav">
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-danger btn_no_border">هشدارها</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-success btn_no_border">اقلام جدید</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-primary btn_no_border">ناموجود</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-info btn_no_border">مشتریان جدید</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-warning btn_no_border">همکاران جدید</button></a></li>
<li class="dropdown"><a class="dropdown-toggle link_btn_clickable_padding" data-toggle="dropdown" href="#"><button class="btn-default btn_no_border navbar-btn">سهیل<span class="caret"></span></button></a>
<ul class="dropdown-menu">
<li><a href="#">نمایه</a></li>
<li><a href="#">خروج</a></li>
</ul>
</li>
</ul>
</div>
</nav>
我希望在导航部分垂直对齐按钮。 我怎样才能做到这一点? https://jsfiddle.net/wzh68cad/2/
我将边框放在ul
区域,我希望ul
区域垂直对齐,我的意思是顶部和底部距离应该相同。
答案 0 :(得分:0)
如果需要垂直对齐宽度相等的
,请设置宽度
.btn {
width: 100px; //or whatever width/units you like that fits everything
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse noPadding">
<div class="container-fluid">
<div class="navbar-header"></div>
<ul class=" nav navbar-left navbar-nav">
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-danger btn_no_border">هشدارها</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-success btn_no_border">اقلام جدید</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-primary btn_no_border">ناموجود</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-info btn_no_border">مشتریان جدید</button></a></li>
<li><a href="#" class="link_btn_clickable_padding"><button class="btn btn-warning btn_no_border">همکاران جدید</button></a></li>
<li class="dropdown"><a class="dropdown-toggle link_btn_clickable_padding" data-toggle="dropdown" href="#"><button class="btn-default btn_no_border navbar-btn">سهیل<span class="caret"></span></button></a>
<ul class="dropdown-menu">
<li><a href="#">نمایه</a></li>
<li><a href="#">خروج</a></li>
</ul>
</li>
</ul>
</div>
</nav>
答案 1 :(得分:0)
评论后更改了答案
您可以使用flexbox。只需添加:
nav .container-fluid {
display: flex;
align-items: center;
justify-content: flex-end;
}
.navbar-header.logo {
margin-right: auto;
}