右侧问题上的Bootstrap导航栏对齐,没有崩溃

时间:2017-04-30 23:58:26

标签: html css twitter-bootstrap navbar

我在导航导航栏中对齐导航时遇到问题。

在plunkr中创建了一个最小的代码。 Plunkr here

我遇到困难的事情:

  • 我想移动"问题"导航到最右边。
  • 当我尝试在移动版或平板电脑版中查看时,同样的问题导航会导致创建2行。

我如何解决这个问题

1 个答案:

答案 0 :(得分:1)

  1. 在顶部“.navbar-header”添加pull-left类。默认情况下,此标头不会为移动设备浮动。添加左拉将使标题室位于右侧以显示问题导航。
  2. 一旦“.navbar-header”关闭,就添加一个新的div <div class=“pull-right”></div>。你的“.navbar-collapse”和“问题导航”现在将在这里生活。
  3. 将“.navbar-collapse”和“问题导航”放入其中。
  4. 将“.navbar-collapse”更新为“pull-left”,您应该获得所需的布局。