17

流動的なレイアウトでサイドバーに接辞プラグインを使用したいのですが、サイドバーの幅は常に変更され、レスポンシブデザインも機能しません。

Bootstrap のドキュメントでは、接辞プラグインは流動的なレイアウトでは使用されていません。多分彼らは同じ問題を抱えているからです。

誰かがそれを機能させる方法を知っていますか?

4

4 に答える 4

26

affix が流動的なspan3サイドバーで動作するようにするには、幅を固定してサイズ変更を管理するための JavaScript を追加する必要があります。

これを機能させるために、小さなJavaScript関数を書きました。

ブートストラップからこのバグをチェックしてください。

/*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function () {
    var elem = $(this);
    var parentPanel = elem.data('clampedwidth');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
        elem.css('width', sideBarNavWidth);
    };

    resizeFn();
    $(window).resize(resizeFn);
});
于 2013-06-21T20:25:23.147 に答える
4

ウェブサイトに添付されているデモはレスポンシブで、予想どおりページの上部に配置されます。position:fixedモバイル デバイスや小さい画面でのCSS プロパティは実行可能なオプションではないため、機能が削除されます。

于 2012-09-21T20:02:34.267 に答える
1

サイドバーの width プロパティ (または min-width) を明示的に設定する必要があります。Andres が指摘したページを見ると、「bs-docs-sidenav」クラスの幅が明示的に 228px になっています。

これは「.span3」クラスをオーバーライドし、スクロール時にサイドバーのサイズが変更されないようにします。

その明示的な幅の宣言を削除してページをスクロールすると、自分のページで見られる問題と同じようにサイドバーのサイズが変更されます。

于 2012-12-31T02:53:48.340 に答える