Alignement Horizontal des vignettes à la centre dans le Bootstrap 3

Je suis en train d'essayer d'avoir 3 miniatures horizontalement à côté l'un de l'autre et centré. Le problème avec ces derniers est qu'ils ne sont pas centrées. Je me demande aussi si je pouvais simplifier le code, puisque par exemple <div class="column"> est répétitif dans l'ensemble des 3 parties. Cependant, lorsque j'essaie de le faire, les images de la pile à la verticale au lieu d'horizontale et je ne suis pas sûr pourquoi. Donc mes questions sont:

Comment puis-je centre les 3 photos sur la page?
Comment puis-je simplifier le code sans les images deviennent empilés à la verticale?

Code actuel

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

<div class="column">
  <div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>Lalalala</p>
      </div>
    </div>
  </div>
</div>

quel est le css......
C'est la norme Bootstrap 3. Par l'évolution de la "ligne" à "colonne" dans la première divs, les images empilées verticalement, mais je ne sais pas si c'est vrai.

InformationsquelleAutor megashigger | 2013-08-23

3

Pas sûr si j'ai bien compris votre question, mais lui a donné un coup de toute façon. Est-ce cela que vous vouliez?

J'ai enlevé tous les <div class="column"> et remplacé avec un seul <div class="row">

J'ai également réglé le col de la taille de col-xs-4 pour chaque vignette.

Ont un coup d'oeil à ce lien pour un exemple d'utilisation de votre code:
http://jsfiddle.net/p9k3x/

InformationsquelleAutor kurupt_89

Si je comprends bien ce que vous demandez correctement, vous devez:

Ajouter un <div class="container"> et <div class="row"> des balises à vos
code.
Supprimer la <div class="column"> tags
Changer votre <div class="col-sm-6 col-md-3"> à <div class="col-xs-4>

La container de la classe des centres d'éléments à l'intérieur que la div sur la page. Vous souhaite à tous de votre col-xx-## classes imbriquées à l'intérieur d'un <div class="row">. Aussi, Bootstrap 3 est "Mobile First", donc tout ce qui est fait dans le col-xs-## classe groupements seront hérités par les grandes résolutions d'écran. La raison de l'utilisation col-xs-4 classe est parce que vous voulez 3 total des colonnes, de sorte que vous voulez prendre jusqu'à 4 de la colonne 12 places. C'est un peu contre-intuitif. Voici quelques Bootstrap 3 de la documentation sur le système de grille.

J'espère que cela répond à votre question! Heureux de codage.

Une fois que vous faites de ces modifications de votre code devrait ressembler à ceci:

 <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>

      <div class="col-xs-4">
        <div class="thumbnail">
          <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>Lalalala</p>
          </div>
        </div>
      </div>
    </div><!-- End Row Div --> 


</div><!-- End Container Div -->

InformationsquelleAutor theRyanMark

Vous devez vous connecter pour publier un commentaire.