Question

根据web2py文档页面分为十六列，这应该放在第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>

Answer 1

您似乎正在使用web2py脚手架应用，该应用目前使用Skeleton作为响应式网格。审核Skeleton documentation。

可能有所帮助

注意，class="ten columns"不会将内容放在第十列，它会使div十列宽。如果你想要第十列中的某些内容，你应该在它前面加上一个9列宽的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标题放在前九列中，你的导航ul放在第十列中（在h1的右边）。如果您希望nav ul多于一列（40px）宽，只需使用所需的列数指定其类（例如class="four columns"）。注意，因为h1 div占用了16个可用列中的9个，所以nav div不应该超过7列宽，否则，它将被推到h1以下而不是浮动到它的右边（这就是什么当你将它设置为10列宽时发生了。

元素未放置在所需位置：class =“ten columns”对元素的位置没有影响

1 个答案: