13

そこで、Twitter の新しい CSS フレームワークであるBootstrapをいじっています。

私が遭遇しているのは次のとおりです。topbarページにdivを追加しました：

<div class="topbar">
      <div class="fill">
        <div class="container">
          <h3><a href="#">Project Name</a></h3>
          <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <form action="">
            <input type="text" placeholder="Search">
          </form>
          <ul class="nav secondary-nav">
            <li class="menu">
              <a href="#" class="menu">Dropdown</a>
              <ul class="menu-dropdown">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
   </div>

ただし、これには予期しない動作がいくつかあります。ページの上部にあるフロートダウンに進みます - example here。

それが起こらないようにする方法はありますか、それとも別のフレームワークを検討する必要がありますか?

4

3 に答える 3

17

トップバーは常に一番上にあるということですか？それが意図した動作です。

削除することで変更できます

position: fixed

トップバーの CSS 定義で。

于 2011-08-27T11:55:34.857 に答える
11

http://twitter.github.com/bootstrap/components.html#navbarから

ナビゲーション バーをビューポートの上部に固定するには.navbar-fixed-top、最も外側の div に.navbar. CSS ではpadding-top: 40px;、<body>.

<div class="navbar navbar-fixed-top">
  ...
</div>
于 2012-02-11T00:41:49.590 に答える
-1 
<div class="topbar">
  <div class="fill">
    <div class="container">
      <h3><a href="#">Project Name</a></h3>
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <form action="">
        <input type="text" placeholder="Search">
      </form>
      <ul class="nav secondary-nav">
        <li class="menu">
            <li class="dropdown" data-dropdown="dropdown" >
            <a href="#" class="menu">Dropdown</a>
              <ul class="menu-dropdown">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
              </ul>
          </li>
        </li>
      </ul>
    </div>
  </div>

于 2011-10-30T21:08:24.513 に答える