平板电脑横向分辨率中导航栏的垂直对齐 - 链接未对齐

Question

在折叠导航栏的certin屏幕分辨率中，有一个链接位于顶行，旁边是“搜索作业”。此外，在这些相同的分辨率下，客户端登录继续像“桌面/笔记本电脑”客户端登录而不是移动登录一样工作。我只有各种平板电脑分辨率的问题（宽度介于768px和1023px之间）。

根据我上传的照片，宽度为768px和1023px之间的“状态”链接仍然与折叠导航栏中的“搜索作业：”文本位于同一行。此外，客户端登录下拉列表的操作类似于展开的导航栏版本，而不是768px和1023px宽度范围内的折叠导航栏版本。上图显示了这种奇怪的外观。

见下面的视觉效果：

http://www.bootply.com/Cl8RGWpCqv

在bootstrap 3中修复此问题的最佳方法是什么（注意：我使用常规的css / css3，既不少也不少）？

<ul>
  <li><span class="ele">One</span>
    <ul>
      <li><span class="ele">Two</span>
        <ul>
          <li><span class="ele">Three</span>
            <ul>
              <li><span class="ele">Four</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Demo