Question

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

Bootply Sample 我实际上想要两件事。我希望胜利和失败在同一条线上（没有导航栏右侧），除非它们甚至不在垂直位置。编辑：我可以在删除navbar-right等时纠正这个问题...但是当菜单被压缩时，不要使用导航栏。

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

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

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

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

Answer 1

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

其次，如果您将徽章包装在另一个范围内，则可以使用媒体查询将容器直接浮动到移动设备上。

<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

Bootstrap 3.1.1折叠时Navbar不同的布局

1 个答案: