Bootstrap 3: Offset ne fonctionne pas?
j'ai ce code:
<div class="row">
<div class="col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0"></div>
<div class="col-sm-3 col-md-12"></div>
</div>
ce que je veux pour les petits écrans (sm) est d'avoir deux divs qui ont trois colonnes chacune, et un décalage de 6 colonnes pour le premier div.
pour les écrans moyens (md), j'aimerais avoir deux div avec douze colonnes chacune (une empilée horizontalement sous l'autre), sans offsets.
D'une façon ou d'une autre le navigateur ne reconnaît pas la classe col-md-offset-0. Il utilise toujours le col-sm-offset-6 classe. Des idées pourquoi?
3 réponses
quelle version de bootstrap utilisez-vous? Les premières versions de Bootstrap 3 (3.0, 3.0.1) ne fonctionnaient pas avec cette fonctionnalité.
col-md-offset-0 devrait être de travailler comme on le voit dans cette amorce exemple trouvé ici (http://getbootstrap.com/css/#grid-responsive-resets):
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
Il n'y a pas de col-??- offset-0. Toutes les "lignes" supposent qu'il n'y a pas de décalage à moins qu'il n'ait été spécifié. Je pense que vous voulez 3 lignes sur un petit écran et 1 ligne sur un écran moyen.
Pour obtenir le résultat que je crois que vous êtes à la recherche pour essayer ceci:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
<div class="col-sm-4 col-md-12">
<p>On small screen there are 3 rows, and on a medium screen 1 row</p>
</div>
</div>
</div>
Conserver à l'esprit que vous ne verrez une différence sur une petite tablette avec ce que vous avez décrit. Écrans moyens, grands et extra petits les colonnes couvrent 12 colonnes.
Espérons que cette aide.
si je vous donne raison, vous voulez quelque chose qui semble être à l'opposé de ce qui est normalement désiré: vous voulez une disposition horizontale pour les petits écrans et des éléments empilés verticalement sur les grands écrans. Vous pouvez atteindre cet objectif dans un chemin comme ceci:
<div class="container">
<div class="row">
<div class="hidden-md hidden-lg col-xs-3 col-xs-offset-6">a</div>
<div class="hidden-md hidden-lg col-xs-3">b</div>
</div>
<div class="row">
<div class="hidden-xs hidden-sm">c</div>
</div>
</div>
Sur les petits écrans, c'est à dire xs et sm, cela génère une ligne avec deux colonnes avec un décalage de 6. Sur les écrans plus grands, md et lg, il génère deux éléments empilés verticalement en pleine largeur (12 colonnes).