Zurb 基础柱宽度不起作用

Question

我有以下代码片段，其中列的宽度应该有效，但不知何故它没有发生并且列 class 的两个 div 都在下一行。

<html>

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>  
</head>

<body> 

    <div class="row">
        <div class="large-8 columns"> Hello </div>
        <div class="large-4 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.
    </div>

</body> 

</html>

Answer 1

您的 foundation.min.css link 需要有一个 rel="stylesheet" 属性来指定它是一个样式表关系。否则它不会被用作一个。您的 large-8 列行还缺少结尾 </div>。

<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="small-2 columns"> Hello </div>
      <div class="small-10 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.</div>
    </div>
  </body>

</html>`

Zurb 基础柱宽度不起作用

Zurb foundation columns width not working

css

html

zurb-foundation

zurb-foundation-5