Bootstrap, faire de sensibles modifications de mise en page

Je suis en utilisant un fluide Twitter Bootstrap mise en page pour mon design et je suis sur le point de le rendre réceptif. Considérons une grille comme ceci:

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

Quelle est la meilleure façon de cacher span4 et laissez span8 prendre toute la largeur, à être utilisé lorsque l'écran est plus petit?

OriginalL'auteur C. E. | 2012-06-14

13

À l'aide d'une requête de média avec tout ce min/max largeur .span4 à display: none;

Ensuite, ajouter .span8 à la règle pour .span12 pour tout ci-dessous quelle que soit la largeur de vous cacher .span4 que tout le travail est déjà fait pour vous par bootstrap, donc pas besoin de le dupliquer. Il ressemblera à quelque chose comme ceci:
```
@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}
```
(Le dernier morceau de code est juste un exemple, mais il y aura quelque chose comme ça dans l'amorce de l'échafaudage.)

Espère que cela aide 🙂

EDIT:

Cela pourrait fonctionner, je l'ai testé en utilisant des outils de dev sur le bootstrap site et ça semblait fonctionner. Encore une fois, dans une requête de média:
```
@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

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

}
```
Je préfère utiliser un Id au lieu d'appliquer display:none .span4, mais la bonne réponse. +1
span12/span8 sont utilisés tout au long de la conception, dans les barres latérales/subgrids et ainsi de suite. Donc j'aurais besoin d'appliquer un IDENTIFIANT de la colonne et de l'utilisation des media queries pour dire "maintenant être span8", "maintenant être span12". Seulement dans le Bootstrap, la grille de classes sont créées dynamiquement comme ~"span@{index}" { truc } pour les différents index (à l'aide d'une construction récursive) et ils n'existe pas réellement et je ne peux pas utiliser MOINS de les inclure dans mon ID définition. Cela signifie que je dois dupliquer le code, et essentiellement de recréer la grille, je ne suis pas trop heureux à ce sujet. Mais votre solution est un travail bien, merci.
J'ai mis à jour ma solution, qui devrait être un peu mieux, et j'espère que pas de chevauchement.

OriginalL'auteur will
24

Avec bootstrap 2.0.2 et vous pouvez:

Modifier le code html:
```
<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>
```
(J'ai interprété les "petites" avec tablette et téléphone tailles, utilisez vos propres définitions pour les autres tailles)

.caché de téléphone et .caché-la tablette cacher la span4 pour les petits écrans.

Pour récupérer l'espace et re-durée de la span8, ajouter ceci dans votre css:
```
@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}
```
Si vous arrive d'être en utilisant moins de vous pouvez utiliser bootstrap grille mixin:
```
.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}
```
Vous pouvez également suggérer comment modifier ce qui est affiché? En utilisant hidden-phone je peux cacher que, div, sans doute, mais comment puis-je, au lieu de la remplacer par autre chose?
ne pourriez-vous pas juste un visible-desktop span4 sous elle?
van de Streek comment avez-vous trouvé ces % des valeurs?
+1 Tu as raison! A peine arrivés que de travail. Je vous remercie.
J'aime vraiment le nom que vous avez choisi, "span12-tablette." Correspond très bien avec les autres classes de bootstrap comme caché-tablette, visible tablette etc.

OriginalL'auteur Gert-Jan van de Streek
7

Si vous utilisez 2.2.1 bootstrap, vous pouvez:

Modifier le code html:
```
<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8"></div>    
</div>
```
Maintenant ajouter ceci dans votre css remplace:
```
@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 toute autre durée de largeurs que vous avez spécifié dans votre code html.

l'effet de ces changements fait tous span largeurs de 100%, causant de l'iPad à toujours utiliser 1 colonne de liquide de mode en mode portrait.

Hey, Vraiment comme cette réponse mais que faire si vous avez 3 travées et vous voulez juste quand une travée de consommer le reste de l'espace?

OriginalL'auteur George Filippakos

Ce serait la meilleure option pour garder la dynamique. Dans mon exemple, j'ai l'largeur à 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;
            }
        }
    }
}

OriginalL'auteur Malte Schulze-Boeing

3

Écrire Comme cela

de téléphone de l'appareil cette div sera cacher<div class="span4 hidden-phone"></div>

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

Mise à jour

Réponse précédente pour Bootstrap 2.3

Maintenant bootstrap 3 venir dans le marché..

si je mettre à jour ma réponse pour le nouvel utilisateur → bootstrap3

de téléphone de l'appareil cette div sera cacher<div class="col-md-4 hidden-xs"></div>

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

vous n'avez pas besoin de @media tag
Il est caché en-lg, cachés-md, caché-sm, caché-sx maintenant. Aussi, si vous masquez span4, et span8 est un bloc, sauf si elle est flottante. En cela, il devrait être un flotteur div. Si cette solution ne fonctionne pas dans cette voie.
- Je mettre à jour ma réponse

OriginalL'auteur asad raza
2

TLDR: Utilisez la 2ème extrait de code

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

Commençant par le plus petit point d'arrêt (xs - très petit), le span4 est caché et l' span8 prend toute la largeur (tous les 12 colonnes)
```
<div class="row-fluid">
    <div class="span4 hidden-xs"></div>
    <div class="span8 col-xs-12"></div>    
</div>
```
Nous ne sommes pas tout à fait terminé mais que nous n'avons pas défini de comportement quand le prochain point d'arrêt est frappé (sm/petit/largeur de l'écran est plus 767px), donc nous allons faire span4 prendre 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>
```
Le ci-dessus suppose que vous avez voulu le changement se produire sur la modification entre le xs - sm points d'arrêt.

Pour en savoir plus:

Si vous voulez que le changement entre sm-md (md = moyen), alors je pourrais utiliser la visible-md classe qui va montrer le span4 sur les points d'arrêt de moyen et de place (>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>
```
OriginalL'auteur ono2012
0

Je suis venu avec une petite variante de cette.

Ajouter stack-tablet classe à un row-fluid pour faire les travées de la pile sur la tablette la largeur, pas seulement sur le téléphone de la largeur (bootstrap par défaut):
```
@media (max-width: 979px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}
```
Peut être utilisé avec l'écran et le hidden - classes.

OriginalL'auteur John

juste:

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

OriginalL'auteur Daniel Faria

Vous devez vous connecter pour publier un commentaire.