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

現在レスポンシブ グリッドにSkeletonを使用している web2py scaffolding アプリを使用しているようです。Skeleton のドキュメントを確認すると役立つ場合があります。

class="ten columns"コンテンツを 10 列目に配置しないことに注意してください。div の幅が 10 列になります。10 番目の列に何かが必要な場合は、その前に 9 列幅の div を付けるか (つまり、class="nine columns")、オフセットするclass="one column offset-by-nine"必要があります (実際には、幅が 40 ピクセルしかない 1 列よりも広くしたい場合があります)。 . 特定の行内で、列の総数 (オフセット列を含む) の合計が 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 ヘッダーが最初の 9 列に配置され、nav ul が 10 番目の列 (h1 の右側) に配置されます。nav ul を複数列 (40px) 幅にしたい場合は、必要な列数でそのクラスを指定するだけです (例: class="four columns")。h1 div は使用可能な 16 列のうち 9 列を占めるため、nav div の幅は 7 列を超えないようにしてください。 10列幅に設定したときに発生していました）。

于 2012-05-15T22:14:29.700 に答える