基础框架:当我认为我按照示例使它们水平堆叠时,我的代码垂直堆叠

问题描述 投票:2回答:2

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

<!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 class="large-4 columns">包含左边的菜单栏,并且第二个div包含页面正文。但是,就像现在一样,这就是公正的

第一堆

文本

而不是将它们放在左列和右列中。据我所知,我正确地遵循这些说明:

https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

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

html css zurb-foundation frontend
2个回答
0
投票

看起来你的css文件没有加载,试试这个<link rel="stylesheet" href="css/foundation.css" />并删除../部分。

我希望它能起作用:-)

最好的问候,乔治


0
投票

与基础文档相比,您的代码似乎是正确的,我无法找到有关您似乎正在使用的Foundation版本的网格实现的不同文档。

我能想到的是,如果您确定使用与您共享的链接相同的基础版本(5.5.3)。 latest version docs表示,Foundation 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>

干杯,

© www.soinside.com 2019 - 2024. All rights reserved.