twitter-bootstrap - 在没有响应崩溃的情况下使用 Bootstrap 3 Navbar 的最佳方法

Question

我正在尝试在 Bootstrap 3 中创建一个不会折叠的简单导航栏 - 这里不需要响应，因为我们在左侧只有一个简单的标题 + 右侧的按钮。

我的目标是让所有分辨率的标题 + 按钮始终显示相同。像这样的东西:

<div class="navbar navbar-fixed-top">

    <form class="navbar-form navbar-right">
        <button class="btn btn-default">Button 1</button>
        <button class="btn btn-default">Button 2</button>
    </form>

    <a class="navbar-brand" href="#">Title Here</a>

</div>

我尝试了 documentation 中的多种组合.和 this post outlines how to use the new .nav-header classes .我尝试复制 .nav-header 中的元素 - 还尝试覆盖 BS3 媒体查询样式。

有没有更简单的方法来使用导航栏而不崩溃？

Answer 1

我能找到的最好方法是使用 2 navbar-header容器，然后使用 pull-left和 pull-right因为它们与任何响应式媒体查询无关..

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title Here</a>
    </div>
    <div class="navbar-header pull-right">
      <button type="button" class="btn btn-default navbar-btn">Button 1</button>
      <button type="button" class="btn btn-default navbar-btn">Button 2</button>
    </div>
</div>

Bootply 演示: http://bootply.com/74912