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

【问题标题】：Best way to use Bootstrap 3 Navbar without responsive collapse在没有响应崩溃的情况下使用 Bootstrap 3 Navbar 的最佳方法
【发布时间】：2013-08-17 19:23:50
【问题描述】：

我正在尝试在 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 媒体查询样式。

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

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 navbar

【解决方案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

【讨论】：

效果很好 - 感谢您也推荐 .navbar-btn 类
谢谢。这非常有用。
谢谢！这真的很有帮助！我能找到的最简单的解决方案！

【解决方案2】：

就我而言，我只使用了navbar-header，没有别的。

基本上，navbar-header 可以帮助我轻松地将所有标题 css 放入其中。在其中，我添加了一个容器，并在与您的类似情况下使用了我的选项。

    <nav class="navbar navbar-default navbar-fixed-top" id="transient-header">
        <div class="container clearfix">
            <div class="transient-header-block clearfix">
                <h1 class="hide" href="/" style="color: #fff;">Primary</h1>
                <a class="navbar-brand" href="/">{{> svgs/logos/_white_symbol}}</a>
                <div class="pull-right price">
                    <a href="#" class="btn btn-white-border contact-modal" href="#contactModal">
                        {{> svgs/_white_rupee_icon}}
                        {{product.price}}
                    </a>
                </div>
            </div>
        </div>
    </nav>

【讨论】：