Question

这是我的HTML代码 -

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>{+title /}</title>

        <link rel="stylesheet" href="/css/app.css">
        <link rel="stylesheet" href="/css/foundation.css">
        <link rel="stylesheet" href="/css/style.css">

    </head>
    <body>
        <div class="row">
            <div class="large-12 columns">
                <nav class="top-bar" data-topbar role="navigation">
                    <section class="top-bar-section">
                        <ul class="left">
                            <li><a href="/">Home</a><li>
                            <li><a href="/pages/about">About</a><li>
                            <li><a href="/cart">Cart</a><li>
                        </ul>
                    </section>
                <nav>
            </div>
        </div>
            {+body /}



        <script data-main="/js/app" src="/components/requirejs/require.js"></script>

    </body>
</html>

而My Out put正在关注 - 似乎没有CSS影响。请注意我的基础CSS包含的一件事，我已经测试过了。

Answer 1

我认为你缺少基础初始化调用。在BODY标记结束之前添加：

$(document).foundation();

以下是v6.3的语法：

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
</head>
<body>

    <div class="top-bar">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Site Title</li>
                <li>
                    <a href="#">One</a>
                    <ul class="menu vertical">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="menu">
                <li><input type="search" placeholder="Search"></li>
                <li><button type="button" class="button">Search</button></li>
            </ul>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

</body>
</html>

基础导航导航类不会显示为导航栏

1 个答案: