Bootstrap - 导航栏 - 同一行按钮之间的文本

Question

我正在尝试在 Bootstrap 的导航栏中使用两侧的按钮呈现一些文本。

问题是当窗口宽度变得太小并且导航栏垂直对齐时，我无法让它们保留这些位置。

HTML：

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><span class="navbar-btn pull-left"><a href="#" class="btn btn-default btn-sm">Prev</a></span></li>
    <li class="text-center"><p class="navbar-text">Navigation</p></li>
    <li><span class="navbar-btn pull-right"><a href="#" class="btn btn-default btn-sm">Next</a></span></li>
    <li><a href="#">Do something</a></li>
  </ul>
</div>

JSFiddle：http://jsfiddle.net/xhgae23g/

应该怎么样？

Answer 1

CSS 样式问题：尝试将UL 用作display: block;，将LIs 用作display: inline-block;。当浏览器变得太窄时，它们会堆叠而不是排列。