Question

我正在尝试创建一个网站的基础，而我似乎无法在页脚中使用列。我非常确定我使用了正确的CDN并正确导入了所有内容。页脚应该有四列。

＆＃13;

<!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>Hangout</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <!-- Footer -->
    <footer>
      <div class="row">
        <div class="medium-3 columns">
          <h6>Laboratory</h6>
          <a href="http://www-act.ucsd.edu/maps/?mapid=459&wid=459&iws=true&cat=&t=Map&z=15&opacity=50&ll=32.879731,-117.236756&rand=92629" target="_blank">Canter Hall 3131</a><br>
          Biological Sciences and Bioengineering
        </div>
        <div class="medium-3 columns">
          <h6>SITE MAINTAINED BY</h6>
          <hr>
          A<br>
          B<br>
          C<br>
        </div>
        <div class="medium-3 columns">
          <h6>CONTACT LAB</h6>
          <hr>
          Phone: (999) 999-9999
          <br>
          <a href="https://www.google.com/">More Information</a>
        </div>
        <div class="medium-3 columns">
          <h6>AFFLIATIONS</h6>
          <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="40"></div></a></div>
          <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="40"></div></a></div>
          <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img3" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="40"></div></a></div>
          <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img4" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="75"></div></a></div>
        </div>
      </div>
    </footer>



    <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>

＆＃13;

Answer 1

基金会有changed the way网格在v6.4中工作

v6.4中完全重新设计的新网格系统，其中包含多种网格类型的所有内容，包括边距网格，填充网格，框架网格，块网格和垂直网格。

将row替换为您的行div上的grid-x：

<div class="row">
<!-- becomes: -->
<div class="grid-x">

将columns替换为cell：

<div class="medium-3 columns">
<!-- becomes: -->
<div class="medium-3 cell">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/css/foundation.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css" />
<!-- Footer -->
<footer>
  <div class="row grid-x">
    <div class="medium-3 cell">
      <h6>Laboratory</h6>
      <a href="http://www-act.ucsd.edu/maps/?mapid=459&wid=459&iws=true&cat=&t=Map&z=15&opacity=50&ll=32.879731,-117.236756&rand=92629" target="_blank">Canter Hall 3131</a><br>
      Biological Sciences and Bioengineering
    </div>
    <div class="medium-3 cell">
      <h6>SITE MAINTAINED BY</h6>
      <hr>
      A<br>
      B<br>
      C<br>
    </div>
    <div class="medium-3 cell">
      <h6>CONTACT LAB</h6>
      <hr>
      Phone: (999) 999-9999
      <br>
      <a href="https://www.google.com/">More Information</a>
    </div>
    <div class="medium-3 cell">
      <h6>AFFLIATIONS</h6>
      <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="40"></div></a></div>
      <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="40"></div></a></div>
      <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img3" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="40"></div></a></div>
      <div><a href="https://www.google.com/" target="_blank"><div class="logo_box"><img class="img4" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="75"></div></a></div>
    </div>
  </div>
</footer>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/js/foundation.min.js"></script>

参考文献：

你如何在基础6.4上创建页脚列？

1 个答案: