如何对齐垂直导航内容

时间:2017-05-09 12:10:43

标签: html5 twitter-bootstrap css3

我的页面导航部分有按钮。按钮处于无序列表标记中,以便:

<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区域垂直对齐,我的意思是顶部和底部距离应该相同。

2 个答案:

答案 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;
}

https://jsfiddle.net/tzees3oh/5/