30

我正在尝试在 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>

我已经尝试了文档中的多种组合。这篇文章概述了如何使用新的 .nav-header 类。我尝试复制 .nav-header 中的元素 - 还尝试覆盖 BS3 媒体查询样式。

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

4

2 回答 2

57

我能找到的最好方法是使用 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

于 2013-08-17T20:03:45.723 回答
1

就我而言，我只使用了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>
于 2016-04-11T09:55:56.877 回答