0

根据 web2py 文档页面分为 16 列，这应该放在第 10 列但它不起作用，我对所有这些都是新手，所以不知道从哪里开始调试。指针？

 <div class="ten columns">
      <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Login</a></li> 
      <li><a href="#">Privacy</a></li>
     </ul>
    </nav>
      </div>
    </header>

ten columns没有效果。该列表放置在默认位置（最左侧）。

*Entire File*

<!DOCTYPE html>
  <head>
    <title>Web On Steroids</title>
    {{response.files.append(URL('static','css/skelton.css'))}}
    {{include 'web2py_ajax.html'}}
  </head>
<body>
  <header class="container">
    <div class="ten columns">
      <h1>tukker.me</h1>
      </div>
    <div class="ten columns">
      <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Login</a></li> 
      <li><a href="#">Privacy</a></li>
     </ul>
    </nav>
      </div>
    </header>
  <section id="main" class="container">
    <div class="ten columns">
          <h1>Messages With 300 Chars</h1>
      </div>
  <div class="sixteen columns">
        <a href="#" class="button">Register</a>
      </div>
      <footer class="container">
      <nav class="sixteen columns alpha omega">
        <a href="#">About</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>
     </nav>
    </footer>
</body>
4

1 回答 1

1

看来您正在使用 web2py 脚手架应用程序，该应用程序当前使用Skeleton作为响应式网格。查看Skeleton 文档可能会有所帮助。

注意，class="ten columns"不把内容放在第十列，它使 div 宽十列。如果你想要第十列中的某些东西，你应该在它前面加上一个九列宽的 div（即class="nine columns"），或者将它偏移class="one column offset-by-nine"（实际上，你可能希望它比只有一列宽，它只有 40px 宽） . 请注意，在给定的行中，总列数（包括偏移列）应加起来不超过 16。具体而言，在您的情况下，您可以尝试：

  <header class="container">
    <div class="nine columns">
      <h1>tukker.me</h1>
    </div>
    <div class="one column">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Login</a></li> 
        <li><a href="#">Privacy</a></li>
      </ul>
    </nav>
    </div>
  </header>

这会将您的 h1 标题放在前九列，将您的导航放在第十列（在 h1 的右侧）。如果您希望 nav ul 的宽度超过一列 (40px)，只需使用您想要的列数指定其类（例如，class="four columns"）。注意，因为 h1 div 占据了 16 个可用列中的 9 个，所以 nav div 不应超过 7 列宽，否则，它将被推到 h1 下方而不是浮动到它的右侧（这就是当您将其设置为 10 列宽时发生）。

于 2012-05-15T22:14:29.700 回答