Foundation 6 中的面板不渲染

Question

这里是 Foundation 6 的新手，所以可能缺少一些简单的东西。我试图让面板渲染，但它只是不显示给我。我有什么遗漏吗？

我是否将 div = 面板放入或不放入都没有区别。它看起来和之前或之后一样。

愚蠢的问题，但我是否必须运行来自网络服务才能呈现这些内容？

我使用命令行提示安装了 Foundation 6。

谢谢！

<!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>Site Demo</title>
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

    <div class="row">
      <div class="large-12 columns">
        <div class="panel">
          <h1>Title</h1>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
              <a href="#">One</a>
              <ul class="submenu menu vertical" data-submenu>
                <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>
      </div>
    </div>

    <div class="row">
      <div class="large-2 columns">
        <div class="large-2 columns">

        <a class="button" href="#"> button 1</a>
        <a class="button" href="#"> button 2</a>
        <a class="button" href="#"> button 3</a>
        <a class="button" href="#"> button 4</a>
        </div>

        <!--  <ul class="large-block-grid-1">

        <li><a class="button" href="#"> button 1</a></li>
        <li><a class="button" href="#"> button 2</a></li>
        <li><a class="button" href="#"> button 3</a></li>
        <li><a class="button" href="#"> button 4</a></li>
        </ul>
        -->

      </div>

      <div class="large-10 columns">
        <div class="large-4 columns">
          <div class="panel">
            <p>Content A</p>
          </div>
        </div>
        <div class="large-4 columns">
          <div class="panel">
            <p>Content B</p>
          </div>
        </div>
        <div class="large-4 columns">
          <div class="panel">
            <p>Content C</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row" style="background-color:#cccccc;">
      <div class="large-12 columns">
        <p bg-color="red">Footer</p>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="js/app.js"></script>

  </body>
</html>

Answer 1

来自Foundation 6 Callout Docs：

Callouts combine panels and alerts from Foundation 5 into one generic container component.

在 Foundation 6 中使用 class .callout 而不是 .panel。

Foundation 6 中的面板不渲染

Panels in foundation 6 not rendering

html

zurb-foundation

panel

zurb-foundation-6