Question

我正在尝试在Bootstrap 3中创建一个不会崩溃的简单Navbar - 这里没有必要响应，因为我们在右边的左侧+按钮上只有一个简单的标题。

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

<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媒体查询样式。

有没有更简单的方法来使用Navbar而不会崩溃？

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

使用Bootstrap 3 Navbar而不响应崩溃的最佳方法

1 个答案: