Bootstrap 3: Offset n'est pas de travail?

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 (sm) des écrans est d'avoir deux divs qui ont trois colonnes de chaque, et un décalage de 6 colonnes pour la première div.

Pour les moyennes (dm) pour les écrans, je voudrais avoir deux divs avec douze colonnes de chacun (l'un à l'horizontale empilé, en vertu de l'autre), avec pas de compensations.

En quelque sorte 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?

Il est difficile de trouver ce que vous cherchez depuis votre code, actuellement a seulement 2 colonnes. Pouvez-vous créer un Bootply

OriginalL'auteur David | 2014-03-21

  1. 34

    La version de bootstrap utilisez-vous? Les premières versions de Bootstrap 3 (3.0, 3.0.1) ne fonctionne 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>
    oui, ça y est, la première version du Bootstrap3 est la réponse
    Vous pouvez toujours utiliser offset0 pour d'autres xs-ls-md :: col-lg-9 col-lg-offset-0, col-md-offset-1 col-md-8
    Toutes les mises à jour? Cela fait un an maintenant.

    OriginalL'auteur

  2. 0

    Il n'y a pas de col-??-le décalage de 0. Tous les "lignes" qu'il n'y a pas de décalage, sauf si elle a été spécifiée. Je pense que vous êtes désireux de 3 lignes sur un écran plus petit et 1 ligne sur un support d'écran.

    Pour obtenir le résultat, je crois que vous cherchez, 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>

    Garder à l'esprit que vous ne verrez une différence sur une petite tablette avec ce que vous avez décrit. Medium, large et extra les petits écrans, les colonnes sont étendant sur 12.

    Espère que cette aide.

    OriginalL'auteur

  3. 0

    Si je reçois de vous droit, vous voulez quelque chose qui semble être à l'opposé de ce qui est souhaité normalement: vous souhaitez une mise en page horizontale pour les petits écrans et empilés à la verticale des éléments 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 de plus grands écrans, c'est à dire md et lg, il génère deux éléments empilés verticalement en pleine largeur (12 colonnes).

    OriginalL'auteur