Html 基础框架：当我遵循示例使它们水平堆叠时，我的代码垂直堆栈。_Html_Css_Zurb Foundation_Frontend

Html 基础框架：当我遵循示例使它们水平堆叠时，我的代码垂直堆栈。

html css zurb-foundation

Html 基础框架：当我遵循示例使它们水平堆叠时，我的代码垂直堆栈。,html,css,zurb-foundation,frontend,Html,Css,Zurb Foundation,Frontend,我为基础中的一个页面编写了以下内容。我重新定位了一些标准文件和文件夹，因此修改了文件路径 <!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible&qu

我为基础中的一个页面编写了以下内容。我重新定位了一些标准文件和文件夹，因此修改了文件路径

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <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>Title</title>
    <link rel="stylesheet" href="../css/foundation.css">
    <link rel="stylesheet" href="../css/app.css">
  </head>
  <body>
    <!--
    <div class="row">
      <ul class="pagination" role="navigation">
        <li class="menu-text">Understood</li>
        <li class="disabled">First</li>
        <li class="disabled">Previous</li>
        <li class="disabled">Next</li>
        <li class="disabled">Last</li>
      </ul>
    </div>
    -->

    <div class="row">
      <div class="large-4 columns">
        <!--
        <ul class="menu vertical">
          <li><button class="button">Home</button></li>
          <li><button class="button">Map</button></li>
          <li><button class="button">1. Prehistory</button></li>
          <li><button class="button">2. Ancient</button></li>
          <li><button class="button">3. Classical</button></li>
        </ul>
        -->
        <p>First Bunch</p>
      </div>
      <div class="large-8 columns">
        <p>Text</p>
      </div>
    </div>

    <script src="../js/vendor/jquery.js"></script>
    <script src="../js/vendor/what-input.js"></script>
    <script src="../js/vendor/foundation.js"></script>
    <script src="../js/app.js"></script>
  </body>
</html>


标题
第一束
正文

我留下了一些注释，因为当我在注释中呈现代码时，除了应该呈现列的内容之外，它是有效的。然而，我正在慢慢学习如何制作菜单栏，包含列的行应该是第一次尝试——因此我希望第一个

包含左侧的菜单栏，第二个

div

包含页面主体。然而，正如现在一样，这呈现为

第一束

正文

而不是将它们放在左栏和右栏中。据我所知，我正确地遵循了这些说明：

我也在我的台式电脑上这样做，所以我认为它不应该将屏幕大小视为大屏幕。我正在Linux机器上使用最新版本的Firefox进行查看，开发人员控制台没有显示任何错误。

如果您的css文件没有加载，请尝试此

并删除

。/

部分

我希望它能起作用：-）

诚挚的问候，格奥尔

< p>与基础文档相比，您的代码似乎正确，而且我还没有找到关于您正在使用的基础版本的网格实现的不同文档。

我能想到的是，如果你确信使用同一版本的基金会比你所共享的链接（5.5.3）。Stand基金会6附带默认的布局网格。如果不需要支持IE 10，它还建议使用XY网格

看起来是这样的：

<div class="grid-x">
  <div class="cell large-4">First element</div>
  <div class="cell large-6">Next element</div>
</div>


第一要素
下一个元素

干杯，

不，改变并没有解决问题。我添加了

。/

部分，因为我在不同的目录中找到了我的文件。