52

私は Twitter Bootstrap を使用しており、次のものがあります。

<div class="row">

    <div class="span3">
        <div data-spy="affix">
            <form>
                <!-- inputs and stuff -->
            </form>
        </div>
    </div>

    <!-- span9 and its contents -->

</div>

ブートストラップは接辞効果を正しく適用して<div>おり、ページを下にスクロールしても静止したままです。ただし、ページのサイズをモバイルのサイズに変更すると、ブートストラップのレスポンシブ効果が発生します (ナビゲーションバーの折りたたみ/オブジェクトが互いにうまく整列します) <div>。これは、それをかなりよく説明しているために起こっ.affixています。position: fixed

今、私はBootstrapのウェブサイトに行き、ページをモバイルサイズにサイズ変更しました。添付された要素 (<ul>彼らの場合) はページにうまく流れ始め、他の要素の上に行くことなく自然な場所を占めます. affixまた、それが発生すると、クラスが からに変更されることにも気付きましたaffix-top。

フレームワークが明らかに同じように動作していないため、これが彼らのカスタマイズなのか、それともフレームワークの一部なのかはわかりません。誰でもこれについて詳しく説明できますか？<div>ページのサイズがモバイルのサイズに変更された場合、固定された要素が自然な場所に配置される場合、同じ動作をする必要があります。

編集：私の観察には少し欠陥があります。affix-top彼らのページの要素が最初は持っていて、下にスクロールするdata-top-offsetと に変わることに気付きましたaffix。サイズを変更したときに私の<div>ようにレンダリングされない理由はまだ説明されていません。<ul>

4

3 に答える 3

63

Bootstrap は、一部の要素のデフォルトの動作をオーバーライド する追加の CSS ファイルをドキュメントに使用します。

具体的には、917 行position目で、(<767px 幅のメディア クエリの一部として) 添付されたサイドバーの を次のように変更しstaticます。

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

添付のサイドバーに適用される追加のカスタム スタイルがいくつかあります。電話サイズのウィンドウで Chrome Web Inspector/Firebug を使用して表示できます。

于 2012-11-12T21:29:36.447 に答える
28

HTML span3 (または span4 など) DIV を添付しないで、その子を添付します。私の場合は #sidebar を付けました。また、この div に .affix クラスまたは data-offset-top="XXX" を追加する必要はありません。次の Javascript がそのトリックを行います。

  <aside class="span3">
    <div id="sidebar">
     <p>some content</p>
    </div>
  </aside>

CSS (以下のコードは bootstrap.css に存在しません。http://twitter.github.io/bootstrap/assets/css/docs.cssからコピーしました)

.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 400px;
}

Javacript次の js は、ページのスクロール量に応じて #sidebar のクラスを .affix から .affix-bottom に変更します

   $('#sidebar').affix({
      offset: {
        bottom: 450
      }
   });

実際、解像度が小さい場合、#sidebar は他の要素と重なります。これを解決するには、ブートストラップのメディア クエリを使用しますhttp://twitter.github.io/bootstrap/scaffolding.html#responsive

サラが以前に指摘したように、次のようなものを使用できます..

@media(max-width:767px){
   .affix {
     position: static;
     width: auto;
     top: 0;
    }
}

.. #sidebar を動作させるようにします。

これが誰かに役立つことを願っています!

于 2013-04-06T01:32:18.817 に答える
1

私は同じ問題を抱えていました.私の解決策は、小さな画面サイズの接辞の動作を削除することでした. たとえば、1199 ピクセル未満のサイズを削除するには、次のようにします。

#map {

  @media (min-width: 1199px) {
    &.affix-top {
    }

    &.affix {
      position: fixed;
      top: 20px;
      bottom: 100px;
    }

    &.affix-bottom {
    }
  }
}
于 2014-01-27T23:05:48.437 に答える