Bootstrap 3RC1 + Panneau latéral + Cahier

Question

Pouvez-vous m'aider à mettre en œuvre un panneau latéral qui reste visible lorsque la page est défilée en utilisant Bootstrap v3 RC1 ?

Voici mon code Bootply.

Mon problème est que lorsque je fais défiler la page, le panneau rétrécit, et je veux qu'il garde la même taille lorsque la page est en haut. Si j'écris et style pour l'effet affix (.affix{width:10%}), je peux définir la largeur. Cependant, si je fais comme ça, je devrai mettre la taille exacte pour le panneau.

Est-ce la bonne approche?

Answer 1

Le plugin d'affixage définit différentes classes pour votre élément en fonction de la position de défilement (et du décalage). Avant le décalage, cette classe sera affix-top, entre affix-offset-top et affix-offset-bottom cette classe sera affix. La position définie par css pour affix-top sera statique (par défaut, voir aussi: http://www.w3schools.com/cssref/pr_class_position.asp) tandis que la position de la classe affix est fixée.

Lorsqu'un élément a position:absolute sa largeur est maximale la largeur de son parent. Ainsi, dans votre cas, votre panneau obtient une largeur de 100% de la col-lg-3 (en raison de la boîte-sizing: border-box, voir Pourquoi Bootstrap 3 a-t-il adopté box-sizing: border-box? ). La largeur de cette classe sera de 25% (3/12 * 100) du parent .container div. La largeur de la .container dépend de la largeur de l'écran / viewport.

La classe affix avec position:fixed n'a pas de conteneur parent. Ainsi, la largeur de cet élément sera de 100% du viewport moins la position de gauche de l'élément (100% de l'espace disponible).

Lorsque vous changez le viewport, la largeur de la .container est fixée entre les limites de la grille (voir: http://getbootstrap.com/css/#overview-container). Ainsi, la taille de votre affix-top sera fixée entre ces limites. Toujours 25% de la .container. Définissez également la classe .affix à 25% sa taille variera de manière fluide. Parce que 25% du viewport (moins la gauche) n'est généralement pas égal à 25% du conteneur, votre élément affixé aura une largeur différente avec la classe .affix.

Pour les raisons mentionnées ci-dessus, la largeur de l'élément affixé est généralement fixée à une valeur en pixels. Pour un exemple, consultez la documentation sur http://getbootstrap.com/.

La meilleure façon de faire varier la largeur de votre panneau latéral en fonction de la largeur de l'écran (le rendre réactif) sera des largeurs en pixels en combinaison avec des requêtes multimédias.

Exemple:

/* Appareils extra petits (téléphones, jusqu'à 480px) */
/* Aucune requête média car il n'y a pas d'affix */

/* Petits appareils (tablettes, 768px et plus) */
@media (min-width: 768px) { #side-panel { width: 152px; } }

/* Appareils moyens (ordinateurs de bureau, 992px et plus) */
@media (min-width: 992px) { #side-panel { width: 208px; } }

/* Grands appareils (grands ordinateurs de bureau, 1200px et plus) */
@media (min-width: 1200px) { #side-panel { width: 270px; } }

Voir : http://bootply.com/82661 (notez que j'adapte votre code pour Bootstrap 3.0.0).

Autre possibilité : définir la largeur avec jQuery : Cela montre que la largeur dépend de la .container, mais privilégiez la solution css ci-dessus.

$(document).scroll(function(){
    $('.panel.affix').width(((($('.container').width()+30)/4)-30));
})

Answer 2

Dans le CSS de Bootstrap pour la class="panel", il appliquera automatiquement

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

Essayez d'ajouter un width:270px au CSS de .panel.

Après cela, cela ressemblera à ceci

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

En espérant que cela règle votre problème.