web-dev-qa-db-fra.com

Bootstrap 3: le décalage 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), c'est d'avoir deux divs ayant chacun trois colonnes et un décalage de 6 colonnes pour le premier div.

Pour les écrans moyens (md), j'aimerais deux divs de douze colonnes (empilés horizontalement sous l'autre), sans décalage.

D'une manière 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?

twitter-bootstrap-3offset
18
David

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 fonctionner comme indiqué dans cet exemple bootstrap 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>
35
Overachiever

Si je vous comprends bien, vous voulez quelque chose qui semble être le contraire de ce que vous souhaitez normalement: vous voulez une disposition horizontale pour les petits écrans et des éléments empilés verticalement sur des grands écrans. Vous pouvez y parvenir de la manière suivante:

<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, c'est-à-dire md et lg, il génère deux éléments empilés verticalement sur toute la largeur (12 colonnes).

0
Clifton Morris

Il n'y a pas de col - ?? - offset-0. Toutes les "lignes" supposent qu'il n'y a pas de décalage sauf si spécifié. Je pense que vous voulez 3 rangées sur un petit écran et 1 rangée sur un écran moyen.

Pour obtenir le résultat que vous recherchez, je pense, essayez 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>

Gardez à l'esprit que vous ne verrez une différence sur un petit comprimé qu'avec ce que vous avez décrit. Les colonnes de taille moyenne, grande et très petite, couvrent 12 colonnes.

J'espère que cela t'aides.

0
zach57