Question

我试图弄清楚如何在移动设备nav-stacked nav-pills和使用Bootstrap的其他所有设备之间切换non-nav-stacked nav-pills。例如，对于桌面：

 <nav>
  <ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="index.html">About</a></li>
    <li role="presentation"><a href="services.html">Services</a></li>
    <li role="presentation"><a href="pricing.html">Pricing</a></li>
    <li role="presentation"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

对于移动设备：

 <nav>
  <ul class="nav nav-pills nav-stacked">
    <li role="presentation" class="active"><a href="index.html">About</a></li>
    <li role="presentation"><a href="services.html">Services</a></li>
    <li role="presentation"><a href="pricing.html">Pricing</a></li>
    <li role="presentation"><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Answer 1

让我回答我自己的问题，以防任何其他人得到它的帮助。我发现一个好方法是使用.hidden类。例如，在上面的代码中，第一个块的类将被修改为：

<ul class="nav nav-pills hidden-xs">

第二个块的类将被修改为：

<ul class="nav nav-pills nav-stacked visible-xs-inline">

希望这有用！

Answer 2

这取决于您希望特定菜单显示的屏幕大小。为导航提供ID。

<nav id="desktopNav">

和

<nav id="mobileNav">

这就是我要做的。

FOR DESKTOP 我会隐藏移动菜单

#mobileNav{ display:none;}

FOR MOBILE 我会隐藏桌面菜单

#desktopNav{ display:none;}

基本上，这样做会在您在计算机或平板电脑上查看时显示desktopNav，然后在手机上显示mobileNav。

在CSS中，您希望为移动设备执行此操作

@media only screen and (max-width: 600px) {
     ENTER YOUR CSS CODE HERE
}

这将在CSS文件的末尾。这告诉浏览器，任何600px以下的设备都会做其他事情。你会把desktopNav放在那里。这被称为响应式网站。

如何针对不同屏幕尺寸在导航丸和导航堆叠之间切换？

2 个答案: