Question

为了进行测试，我将使用Foundation 6.3.1构建的站点克隆到另一个安装了6.4.3的文件夹中。一切似乎都正常显示，我正在使用浮动模式。

无论如何，在6.3.1中，我使用了几个类来设置我的顶栏：expanded和menu-centered。

我正在阅读文档，根据我的理解，您必须包含@menu-expand;和@menu-align;。

无论如何，我试过这个，6.4.3仍然只是吹出我的上边栏。

我在这里发布了2个链接，它们都有相同的HTML和CSS代码供比较。

首先查看此版本 - 请确保缩小浏览器，直至看到移动设备并点击它。

Foundation 6.3.1 Version on CodePen（工作正常）

<!-- html -->
      <div class="row top-row-wrapper">
    <div class="top-bar menu-centered"> <!-- menu-centered -->
        <div class="title-bar" data-responsive-toggle="my-menu" data-hide-for="medium">
            <button class="menu-icon center" type="button" data-toggle="my-menu" data-responsive-toggle="my-menu"></button>
            <div class="title-bar-title menu-left">MENU</div>

          </div>
    </div> 
    <div class="top-bar" id="my-menu">  
        <div class="top-bar-right">
          <ul class="menu expanded menu-centered" data-responsive-menu="drilldown medium-dropdown">        
            <li><a class="home-link" href="/">HOME</a></li>
            <li><a href="/simmental-sires/">SIRES</a></li>
            <li><a href="/simmental-donors/">DONORS</a></li>
            <li><a href="/simmental-bulls-for-sale/">BULLS</a></li>
            <li><a href="/simmental-heifers-for-sale/">HEIFERS</a></li>
            <li><a href="/bull-care/">BULL&nbsp;CARE</a></li>
            <li><a href="/contact/">CONTACT</a></li>
          </ul>
        </div>   
    </div>
</div>



/*SCSS*/
    $menu-margin: 0rem;
    $menu-margin-nested: 1rem;
    $menu-item-padding: 1rem;
    $menu-icon-spacing: 1.25rem;

    $topbar-padding: 0;
    $topbar-title-spacing: 0rem 1rem 0rem 0;
    $topbar-input-width: 200px;
    $topbar-unstack-breakpoint: medium;


    .top-bar ul.menu li {  
      padding-left:.5em;
      padding-right:.5em;
    }

    .top-bar ul.menu li a {  
      border:1px solid blue;  
    }

    .top-bar-right ul.menu li {  
      white-space:nowrap;  
    }

Foundation 6.4.3 Version on CodePen（相同的代码，但通知已展开且以菜单为中心无法正常工作，移动菜单会变得疯狂）。如何使6.4.3版本像6.3.1版本一样功能？

旁注：我喜欢在Codepen上测试一些小片段，但是，我无法弄清楚是否可以添加/修改它使用的app.scss以添加诸如注释包括的内容（例如foundation-flex-grid /或add包含诸如@include menu-expand;。

Zurb基础6.4.3 6.4顶部菜单类扩展以菜单为中心不起作用

0 个答案: