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;，将LI设为display: inline-block;。当浏览器变得太窄时，它们将堆叠而不是排队。

Bootstrap - Navbar - 同一行中按钮之间的文本

1 个答案: