html - Bootstrap 3.1.1 导航栏折叠时的不同布局

Question

我正在尝试在所有设备上共享导航栏，但我希望它在小屏幕上的格式与在大屏幕上的格式不同。我是 Bootstrap 的新手，所以这可能很明显，但我无法使用一组代码正确设置菜单，而不是尝试使用不同的行和 col-* 设置。

Bootply Sample我其实想要两件事。我希望胜利和失败在同一条线上(没有导航栏右侧就很接近)，除了它们甚至不在垂直位置。编辑:我可以在删除 navbar-right 等时更正此问题...，但在压缩菜单时不要获得 navbar-right。

其次，我想要右导航栏，所以当在小显示器上时，所有徽章都对齐在菜单的右侧。

有没有办法让菜单也变小，所以在平板电脑上它不是屏幕的整个宽度，而在手机上它可能是？

当导航栏正常绘制时，我希望标签旁边的徽章使菜单项更小/更靠近。只有在下拉菜单上，我才希望它们向右移动。

我是否需要创建两个导航副本才能实现此目的？

Answer 1

首先，如果您删除那些 navbar-right 类，徽章似乎与我一致。如果您使用该类只是为了让它们向右浮动，您应该使用 pull-right 但在这种情况下没有必要。

其次，如果您将徽章包装在另一个跨度内，那么您可以使用媒体查询使容器在移动设备上 float 。

<span class="badges">
  <span class="badge alert-success">Win: 3</span>
  <span class="badge alert-danger">Loss: 1</span>
</span>

/* Note that you can use Bootstrap's '@screen-sm-min' variable if using LESS.*/
@media (max-width: 767px) {
  .badges {
    float: right;
  }  
}

如果你希望你的导航栏在移动设备上是全宽的而不是任何其他设备，你可以尝试这样的事情:

@media (min-width: 768px) {
  .navbar {
    width: 80%;
    margin: 0 auto;
  }
}

Demo

---

编辑

对于不断变化的宽度，您可以像这样使用 Bootstrap 的 col-*-* 类:

<div class="wrap">
  <div class="row">
    <div class="col-sm-10 col-sm-offset-1">
      ...
    </div>
  </div>
</div>

这意味着对于移动设备，它将是全宽，但从纵向平板电脑向上的任何内容都将占据 12 个网格中的 10 个。

Demo