Bootstrap 3RC1 + Seitenteil + Affix

Kann mir jemand helfen bei der Umsetzung einer seitlichen Bedienfeld sichtbar bleibt beim scrollen der Seite mit Bootstrap v3 RC1?

Dies ist mein code Bootply.

Mein problem ist, dass wenn ich nach unten scrollen die Seite, das panel schrumpft, und ich möchte es, um die Größe, wenn die Seite oben. Wenn ich Schreibe und Stil für affix (.affix{width:10%}) kann ich die Breite gesetzt. Jedoch wenn ich es auf diese Weise, dann werde ich die genaue Größe für das panel.

Ist das der richtige Ansatz?

InformationsquelleAutor Rauldinho | 2013-08-07
  1. 2

    Das affix-plugin stellt verschiedene Klassen für ein element basiert auf die scroll-position (und offset). Bevor der offset dieser Klasse affix-top zwischen affix-offset-top-und affix-offset-Unterseite dieser Klasse affix. Die position definiert, die von css für affix-top statische (default, siehe auch: http://www.w3schools.com/cssref/pr_class_position.asp), während die position des affix Klasse ist auf festen.

    Wenn einem element position:absolute seine Breite ist max die Breite der Eltern. Also in deinem Fall dein panel bekommen 100% Breite des col-lg-3 (wegen der box-sizing: border-box finden Sie Warum hast Bootstrap-3-switch-box-sizing: border-box? ). Die Breite dieser Klasse werden 25% (3/12*100) Elternteil .div-container. Die (max-)width der .container hängt von der Bildschirm - /viewport-Breite.

    Das affix-Klasse mit position:fixed nicht über einen übergeordneten container. Also 100% Breite dieses Elements werden mit 100% des Viewports minus die linke position des Elements (100% des verfügbaren Speicherplatzes).

    Beim ändern des Viewports die Breite der .container ist fest zwischen den Grenzen des Gitters (siehe: http://getbootstrap.com/css/#overview-container). Also die Größe der affix-top-behoben werden, die zwischen diesen Grenzen. Immer 25% der .container. Legen Sie die .befestigen Klasse auch zu 25% es wird die Größe variiert Flüssigkeit. Verursachen 25% der viewport (minus der linken) meist nicht entspricht 25% der container Ihr angebrachte element eine andere Breite haben mit der Klasse .bringt.

    Aus dem Grund erwähnt, die Breite der angebrachte element ist meist fest eingestellt auf einen Wert in Pixel. Für ein Beispiel siehe die Dokumentation auf http://getbootstrap.com/.

    Die beste Weise, variiert, die Breite der Seitenwand je nach Bildschirm-Breite (machen Sie sensibel) werden die breiten in Pixel, die in Kombination mit media queries.

    Beispiel:

    /* 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; } }

    Finden Sie unter: http://bootply.com/82661 (Hinweis: ich übernehmen den code für Bootstrap 3.0.0.)

    Alternative legen Sie die Breite mit jQuery:
    Dies zeigt die Breite ist abhängig von der .container, sondern lieber die css-Lösung vor.

    $(document).scroll(function(){
    $('.panel.affix').width(((($('.container').width()+30)/4)-30));
})
    • In diesem Beispiel habe ich angenommen, Sie teilten die .container Breite von 4 da das panel, die behoben werden sollten, war col-lg-3. Jetzt habe ich versucht zu beheben col-lg-9 mit diesem code: $('.col-lg-9').width((((($('.container').width()+30)/4) * 3)-30)); aber wie Sie sich vorstellen können, das gibt mir nicht die richtigen Maße! Die col-lg-9 bleibt ein wenig zu weit! Wie kann ich dieses Problem beheben? Welchen code würdet Ihr verwenden? Dank
    • verwenden Sie in diesem Fall $(document).scroll(function(){ $('.panel.affix').width(((($('.container').width()+30)*0.75)-30)); }) wo 0.75 = 9 / 12
    • Danke! Vielleicht können Sie mir helfen mit diesem : stackoverflow.com/questions/21782325/...
    InformationsquelleAutor Bass Jobsen
  2. 0

    In Bootstraps CSS für die class="panel" es wird automatisch 

    .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);
}

    Versuchen Sie, ein width:270px zu den .panel CSS.

    Also wird es so Aussehen danach

    .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);
}

    Hoffentlich das sollte das Problem lösen.

    InformationsquelleAutor Ashley Brown
Schreibe einen Kommentar