web-dev-qa-db-fra.com

Bootstrap, dosage des modifications réactives à la mise en page

J'utilise une mise en page Twitter Bootstrap fluide pour mon design et je suis sur le point de le rendre réactif. Considérez une grille comme celle-ci:

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

Quel est le meilleur moyen de masquer span4 et de laisser span8 occuper toute la largeur, à utiliser lorsque l’écran devient plus petit?

csstwitter-bootstraplessresponsive-design
13
C. E.

Utilisation d'une requête multimédia avec n'importe quelle largeur minimale/maximale, définissez .span4 sur display: none;

Ensuite, ajoutez .span8 à la règle pour .span12 pour tout ce qui se trouve en dessous, quelle que soit la largeur que vous cachez .span4, car tout ce travail est déjà effectué pour vous par bootstrap, vous n'avez donc pas besoin de dupliquer. Cela ressemblera à ceci:

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

(Ce dernier morceau de code n’est qu’un exemple, mais il en ira de même dans l’échafaudage bootstraps.)

J'espère que cela pourra aider :)

MODIFIER:

Cela pourrait fonctionner, je l'ai testé en utilisant des outils de développement sur le site de démarrage et cela a semblé fonctionner. Encore une fois, dans une requête média:

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}
13
will

Avec bootstrap 2.0.2 et supérieur, vous pouvez:

Changer le html à:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

(J'ai interprété «plus petit» avec les tailles de tablette et de téléphone, utilisez vos propres définitions pour les autres tailles)

.hidden-phone et .hidden-tablet cachent le span4 pour les écrans plus petits.

Pour récupérer cet espace et prolonger l'étendue8, ajoutez ceci à votre css:

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

Si vous utilisez moins, vous pouvez utiliser les mixins de grille de bootstrap:

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}
24
Gert-Jan van de Streek

Si vous utilisez bootstrap 2.2.1, vous pouvez:

Changer le html à:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8"></div>    
</div>

Ajoutez maintenant ceci à vos remplacements css:

@media (min-width: 768px) and (max-width: 979px) 
{
    [class*="span"],
    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

Cela fonctionnera également pour toutes les autres largeurs que vous avez spécifiées dans votre code HTML.  

l'effet de ces modifications fait que toutes les largeurs sont de 100%, obligeant ainsi l'iPad à toujours utiliser le mode fluide 1 colonne en mode portrait.

7
George Filippakos

Écrire comme ça

dans le dispositif de téléphone cette div cachera<div class="span4 hidden-phone"></div>

et cette div affichera <div class="span8 visible-phone"></div>

Mettre à jour

Réponse précédente pour Bootstrap 2.3

Maintenant, le bootstrap 3 arrive sur le marché.

donc je mets à jour ma réponse pour nouvel utilisateur → bootstrap3

dans le dispositif de téléphone cette div cachera<div class="col-md-4 hidden-xs"></div>

et cette div affichera <div class="col-xs-4 visible-xs"></div>

3
asad raza

Ce serait la meilleure option pour rester dynamique. Dans mon exemple, la largeur est définie sur 6 colonnes à côté de fluidGridColumnWidth

[class*="span"]  {
    width: 100%;

    .row-fluid {
        [class*="span"] {
            width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5 / @gridRowWidth * 100 * 1%);

            float: left;
            margin-left: @fluidGridGutterWidth;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}
3
Malte Schulze-Boeing

TLDR: utilise le deuxième extrait de code

Bootstrap est un premier framework mobile, je vais donc vous expliquer à partir de la plus petite taille d'écran. La disposition est toujours large de 12 colonnes indépendamment des points d'arrêt/de la taille de l'écran.

À partir du plus petit point d'arrêt (xs - extra small), le span4 est masqué et le span8 prend toute la largeur (les 12 colonnes).

<div class="row-fluid">
    <div class="span4 hidden-xs"></div>
    <div class="span8 col-xs-12"></div>    
</div>

Nous n'avons pas encore terminé car nous n'avons pas défini le comportement lorsque le prochain point d'arrêt est atteint (sm/small/la largeur de l'écran dépasse 767px). Nous allons donc faire en sorte que span4 prenne un tiers de la largeur (12 colonnes/3 = 4 colonnes) et le span8 prendra le reste de la largeur (12-4 = 8 colonnes)

<div class="row-fluid">
    <div class="span4 hidden-xs col-sm-4"></div>
    <div class="span8 col-xs-12 col-sm-8"></div>    
</div>

Ce qui précède suppose que vous souhaitiez que le changement se produise entre les points d’arrêt xs-sm.

Lectures supplémentaires:  

Si vous voulez changer entre sm-md (md = medium), je pourrais utiliser le visible-md class qui affichera le span4 sur les points d'arrêt moyens et supérieurs (> 992px)

<div class="row-fluid">
    <div class="span4 visible-md col-md-4"></div>
    <div class="span8 col-xs-12 col-md-8"></div>    
</div>
2
ono2012

juste:

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>
0
Daniel Faria

Je suis venu avec une petite variation de cela.

Ajoutez la classe stack-tablet à un row-fluid pour que les étendues s'empilent sur la largeur de la tablette, et pas seulement sur la largeur du téléphone (valeur par défaut pour l'amorce):

@media (max-width: 979px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}

Peut être utilisé avec les classes display et hidden.

0
John