2

タイトルのとおり...サイドバーとして接辞を付けたBootstrap 2.1を使用しています。しかし、下にスクロールすると、別の列が突然、次のようにサイドバーの下の左に移動します。

前にスクロール:ここに画像の説明を入力

スクロール後:ここに画像の説明を入力

これが私のコードです:

    <section class="container">
      <article>
        <div class="row">
          <aside class="sidebar span3" data-offset-top="150" data-spy="affix">
            <ul class="nav nav-list">
              <li><a href="#toc_0">標題1<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_1">標題2<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_2">標題3<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_3">標題4<i class="icon-chevron-right pull-right"></i></a></li>
              <li><a href="#toc_4">標題5<i class="icon-chevron-right pull-right"></i></a></li>
            </ul>
          </aside>
          <div class="span9">
4

1 に答える 1

3

要素が「添付」されると、要素の CSS は になりposition: fixedます。これが、フローティングの問題が発生する理由です。Bootstrap のドキュメント ページでは、Affix プラグイン<ul>.sidebar.

試す

<aside class="sidebar span3">
  <ul class="nav nav-list" data-spy="affix" data-offset-top="150">
    ...
  </ul>
</aside>

JSFiddle

于 2012-09-20T23:34:43.797 に答える