5

Twitterのブートストラップドキュメントにあるようなサイドバーを作成しようとしています：http ：//twitter.github.com/bootstrap/getting-started.html

私は接辞を機能させていますが、データオフセットを超えてスクロールするたびに、バーがないためにバーが折りたたまれます。

HTML

<div class="span3">
          <ul data-spy="affix" data-offset-top="255" class="nav nav-tabs nav-stacked docs-sidebar" id="navbar">
            <li><a href="#grid">Grid system <i class="icon-chevron-right pull-right"></i></a></li>
            <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right pull-right"></i></a></li>
            <li><a href="#layouts">Layouts <i class="icon-chevron-right pull-right"></i></a></li>
            <li><a href="#responsive">Responsive design <i class="icon-chevron-right pull-right"></i></a></li>
          </ul>
          <p></p>
       </div>

以下

    // For Affix plugin
.affix {
  position: fixed;
  top: (@navbarHeight * 1.8) + @navbarPadding + 25px;
}

.docs-sidebar {
    width: (@gridColumnWidth * 4);
}

これにより、サイドバーは固定のspan4幅になりますが、応答性は高くなりません。レスポンシブであることを確認するにはどうすればよいですか？

4

1 に答える 1

0

私もこれを行うための最良の方法を見つけようとしています。これが私がしたことです。おそらく最善の解決策ではありませんが、機能しています。

左側に.affixを付けたい2列のレイアウトがあります。列を引っ張って行から修正し、元の行の上の独自の行に配置しました。.offset3を追加して、残りの列を元の場所に戻しました。ulの代わりに.affixを列divに配置しました。次に、固定列をposition：absolute;のCSSを使用してdivでラップしました。（これは.rowdivの内側と.col3divの外側にあります）これにより、2つの.row divがオーバーラップし、一方が固定され、もう一方がスクロールします。

于 2013-03-23T17:39:20.187 に答える