4

Bootstrap v3 RC1 を使用してページをスクロールするときに表示されたままになる側面パネルの実装を手伝ってくれる人はいますか?

これは私のコードBootplyです。

私の問題は、ページを下にスクロールするとパネルが縮小し、ページが一番上にあるときにサイズを維持したいということです。接辞 ( ) を書いてスタイルを.affix{width:10%}設定すると、幅を設定できます。ただし、このようにすると、パネルの正確なサイズを指定する必要があります。

これは正しいアプローチですか？

4

2 に答える 2

2

接辞プラグインは、スクロール位置 (およびオフセット) に基づいて要素に異なるクラスを設定します。オフセットの前では、このクラスは になります。affix-top接辞オフセット トップと接辞オフセット ボトムの間では、このクラスは になりますaffix。クラスの位置が固定に設定されている間、css で定義された位置affix-topは静的です (デフォルト、http ://www.w3schools.com/cssref/pr_class_position.asp も参照)。affix

要素に position:absolute がある場合、その幅はその親の最大幅です。したがって、あなたの場合、パネルは col-lg-3 の 100% 幅になります (box-sizing: border-box のため、Bootstrap 3 が box-sizing: border-box に切り替わった理由を参照してください)。このクラスの幅は、25% (3/12*100) の親 .container div になります。.container の (最大) 幅は、画面/ビューポートの幅によって異なります。

position:fixed の接辞クラスには、親コンテナーがありません。したがって、この要素の 100% 幅は、ビューポートの 100% から要素の左の位置 (使用可能なスペースの 100%) を引いたものになります。

ビューポートを変更すると、.container の幅はグリッドの境界間で固定されます ( http://getbootstrap.com/css/#overview-containerを参照)。したがって、接辞トップのサイズはこの境界間で固定されます。.container の常に 25%。.affix クラスも 25% に設定すると、サイズが流動的に変化します。ビューポートの 25% (左を除く) は、コンテナの 25% とほとんど等しくないため、添付要素の幅はクラス .affix とは異なります。

上記の理由により、添付要素の幅はほとんどの場合、ピクセル単位の値に固定されます。例については、http://getbootstrap.com/のドキュメントを参照してください。

画面の幅に応じてサイド パネルの幅を変更する (レスポンシブにする) 最良の方法は、メディア クエリと組み合わせたピクセル単位の幅です。

例：

/* Extra small devices (phones, up to 480px) */
/* No media query there is no affix */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { #side-panel { width: 152px; } }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { #side-panel { width: 208px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { #side-panel { width: 270px; } }

参照: http://bootply.com/82661 (Bootstrap 3.0.0 のコードを採用することに注意してください。)

別の jQuery で幅を設定する: これは、幅が .container に依存することを示していますが、上記の css ソリューションを優先します。

$(document).scroll(function(){
    $('.panel.affix').width(((($('.container').width()+30)/4)-30));
})
于 2013-09-23T18:40:42.853 に答える
0

Bootstraps CSS では、class="panel"自動的に適用されます

.panel {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

CSSに awidth:270pxを追加してみてください。.panel

なので後はこんな感じです

.panel {
    width: 270px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

うまくいけば、それで問題が解決するはずです。

于 2013-08-08T06:55:51.400 に答える