Question

我正在尝试制作这个网站的副本：http://www.granngarden.se用于学校，但是当我调整浏览器窗口大小时，我遇到了缩小navmenu缩小的问题。这是完整代码的CodePen链接; http://codepen.io/Nealc/pen/gPNZrj?editors=1100

我认为问题在于容器，因为如果我移除侧面的块，菜单仍然是堆叠而不是缩小。

HTML：

<nav>
          <div class="sideBlock meny" id="leftBlock"></div>
               <div class="container">
                   <ul class="meny">
                       <li class="leftMeny"><a href="">Lantbruk & Skog</a></li>
                       <li class="leftMeny"><a href="">Trädgård</a></li>
                       <li class="leftMeny"><a href="">Djur & Foder</a></li>
                       <li class="leftMeny"><a href="">Kläder & Skor</a></li>
                       <li class="leftMeny"><a href="">Hus & Hem</a></li>
                       <li class="leftMeny"><a href="">Lagerfynd</a></li>
                   </ul>
                   <div class="block meny"></div>
                   <ul class="meny">
                       <li class="rightMeny"><a href="">kundklubb</a></li>
                       <li class="rightMeny"><a href="">kundtjänst</a></li>
                       <li class="rightMeny"><a href="">grannliv</a></li>
                   </ul>

               </div>
           <div class="sideBlock meny" id="rightBlock"></div>

       </nav>

CSS：

.container{
    margin-left: auto;
    margin-right: auto;
    width: 65%;
}
nav{
    clear: both;
    width: 100%;
}
.meny{
    float: left;
    height: 38px;
    margin: 0px;
    padding: 0px;
    margin-top: 55px;

}
.meny li{
    margin: 1px;
    padding: 10px;
    background: #801f1f;
    list-style: none;
    height: 18px;
    font-size: 95%;
    float: left;
    max-width: 29%;
}
.rightMeny{
    text-transform: uppercase;
}
.block{
    width: 15%;
    height: 36px;
    background: #801f1f;
    margin-top: 56px;

}
.sideBlock{
    width: 17.5%;
    height: 36px;
    background: #801f1f;
    margin-top: 56px;
}

提前致谢

Answer 1

他们正在使用缩放类，您可以查看bootstrap上最受欢迎的示例之一http://v4-alpha.getbootstrap.com/layout/grid/#quick-start-example

我不确定你是否考虑到这一点，但是如果你这样做，你可以查看链接中的Variables，Mixins和Example使用章节。

响应式导航栏堆叠的缩放

1 个答案: