Question

我试图弄清楚如何让我的网站http://lundinskatt.se上的导航栏在iPad Mini上调整大小，就像在像谷歌Nexus 7这样的小屏幕上一样。它现在显示的方式是整个菜单＆＃34;跳跃＆＃34;向下并将自己定位在徽标下方。我只是想让它像小屏幕一样响应。

我确定这是一个简单的解决办法，但是我的大脑今天没有和我一起工作，所以如果你知道我应该做什么，我必须问你们谁？

最诚挚的问候埃维莉娜

Answer 1

根据你的css，你有

<div class="container-fluid" id="fav-nav-sm">
                <div class="row-fluid"> 
                    <div id="fav-nav" class="span12">
                        <div class="navigation">
                            <div class="moduletable_menu"><ul class="nav menu">
<li class="item-101 current active"><a href="/">Hem</a></li><li class="item-107"><a href="/verksamhetsomraden">Verksamhetsområden</a></li><li class="item-108"><a href="/abonnemang">Abonnemang</a></li><li class="item-110"><a href="/nyheter">Nyheter</a></li><li class="item-109"><a href="/kontakt">Kontakt</a></li></ul>
</div>
                        </div>
                    </div>
                </div>
            </div>

这适用于中等屏幕 - 因为如果你看看你的CSS

@media (min-width: 768px) and (max-width: 1199px) {

    #fav-nav-sm {
        border-bottom: 1px solid #ddd;
    }
  #fav-header #fav-nav {
    display: none;
  }
  #fav-nav-sm #fav-nav {
    padding: 7px 0px 16px;
    float: none;
  }
  #fav-nav-sm .moduletable ul.nav.menu { 
    float: none; 
  }
  #fav-nav-sm .navigation {
    display: table;
    margin: 0 auto;
  }
  #fav-nav-sm .navigation .nav-pills {
    margin-top: 0;
  }

}

这些是您在上述断点之间在此菜单上设置的所有属性。

根据您的问题，您希望拥有菜单的桌面布局或移动布局（不需要中等屏幕 - 删除html中的标记以及来自css的相应样式也可以保持代码清洁）。

现在这个菜单已经消失了，你想在徽标上面显示汉堡包菜单。

将第402行和第1085行的查询更改为此查询

@media (max-width: 1199px) {

}

Navbar在iPad上没有响应，该怎么办？

1 个答案: