垂直对齐Bootstrap

Question

我刚刚阅读了大量有关此问题的主题，并且我已经尝试了所有可能找到的可能性，但我仍然遇到了这个问题。

这是我的代码：

<nav class="navbar navbar-default " role="navigation">
      <div class="topbg"></div>
      <div class="navbar-header">
        <button type="button" class="navbar-toggle">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand logo" href="#"></a>
      </div>
      <div class="collapse navbar-collapse" id="optionFilter">
        <ul class="nav navbar-nav">
          <li class="linksMenu">
            <a class="active" href="#">1</a>
          </li>
          <li class="linksMenu">
            <a href="#">2</a>
          </li>
          <li class="linksMenu">
            <a href="#" >3</a>
          </li>
          <li class="linksMenu">
            <a href="#">4</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><button class="btn btn-primary btn-xs btn-left"></button></a></li>
            <li><a href="#"><button class="btn btn-primary btn-xs btn-right"></button></a></li>
        </ul>
      </div>
    </nav><!-- /navbar --> 

所以我的DIV .navbar-collapse中有两个UL，但我无法修复垂直对齐。 我的DIV具有非固定高度，并自动设置内容，但当我尝试将height : 100%设置为我的UL时，没有任何更改。