Bootstrap ligne l'alignement de problème

Voici mon code HTML:

<div class=container">
   <div class="row">
    <h2 class="text-center">Enter your name below</h2>
    <div class="col-md-6 center">
        <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
    </div>
    <div class="col-md-6 center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
    </div>
   </div>
</div>

Mon css est le suivant (avec bootstrap):

.profile-picture
{
    max-width: 200px;
    max-height: 200px;
}

.center
{
    margin: 0 auto;
    float: none;
}

Ce produit la sortie suivante:
Bootstrap ligne l'alignement de problème

La façon dont je veux qu'il affiche à l'est, comme indiqué ci-dessous:
Bootstrap ligne l'alignement de problème

Comment puis-je y parvenir? Ne devraient-ils pas affichée sur la MÊME ligne de voir comme ils font partie de la même ligne? Chacun a une longueur de 6, alors pourquoi ne pas aligner horizontalement?

  • Avez-vous travailler? J'ai laissé quelques commentaires et suggestions dans ma réponse.
  • FYI - le montage que vous avez fait à votre post, le <h2> rubrique ne doit pas être laissé seul dans la ligne comme ça. L'envelopper dans un <div class="col-md-12" /> ou regarde mon exemple ci-dessous (la réponse)
InformationsquelleAutor Jordan Axe | 2013-11-11
  1. 3

    Le problème est que vous êtes en train de retirer le nécessaire flotter sur les colonnes (par la mise en float:none pour .centre). Supprimer .center classe tout à fait, il n'est pas nécessaire. Vous êtes également en ligne manquante divs...

    Remarque, j'ai ajouté un row autour de la h2 balise ainsi. Pour la facilité d'utilisation et de mise en forme, cette balise doit être enveloppé ainsi. Permet de garder la mise en forme de case. 😉

    Aussi, vous ne devriez pas avoir deux <h3> balises l'un après l'autre comme ça. Utilisation <p> au lieu de la deuxième h3 - ou, mieux encore, il suffit d'utiliser une <h3> balise et l'utilisation <br /> de briser le h3 un sur deux lignes (voir ci-dessous).

    <div class=container">
    <div class="row">
        <h2 class="text-center">Enter your name below</h2>
    </div>
    <div class="row">
        <div class="col-md-6">
            <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
        </div>
        <div class="col-md-6">
            <h3>Profile name: N/A <br />
                Status: Waiting for user input</h3>
        </div>
    </div>
</div>
    • Je vois. Cependant, je voudrais les éléments pour être centré sur la ligne (comme un texte-centre) - comment pourrais-je y parvenir?
    • Créer une ".texte-centre" de la classe...l'affecter la text-align: center CSS. Appliquer à l'élément. Comme quelqu'un d'autre a mentionné, il n'est pas sage pour appliquer un style à l'amorçage des éléments comme les colonnes ou les lignes. Mais tant que c'est simplement des classes et rien à faire avec des chars, de la largeur, de remplissage ou de marges, vous devriez être bien. Dans ce cas, je serais à l'aise de l'application d'un "text-center" class pour les colonnes.
    • Si cela fonctionne pour vous, s'il vous plaît n'oubliez pas d'accepter la réponse. 😉 Cochez la case à la droite de ma réponse. C'est la façon dont nous sommes payés par ici...lol
    • Je vois, merci!
    InformationsquelleAutor Mike Barwick
  2. 1

    Jamais appliquer des styles ou classes d'éléments avec grille de classes, si vous n'êtes pas vraiment savoir ce que vous faites. Utiliser un div imbriqués à la place si vous avez besoin de changer quelque chose:

    <div class=container">

  <h2 class="text-center">Enter your name below</h2>

  <div class ="row">

    <div class="col-md-6">
      <div class ="center">
         <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
       </div>
    </div>

    <div class="col-md-6">
      <div class ="center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
      </div>
    </div>

  </div>
</div>
    InformationsquelleAutor hugo der hungrige
  3. 1

    Avec Bootstrap, vous devez inclure une div avec une classe de row, donc quelque chose comme ceci:

    <div class="row">
    <div class="col-md-6 center">
        <img class="profile-picture" ng-src="../Content/images/default-avatar.png" src="../Content/images/default-avatar.png">
    </div>
    <div class="col-md-6 center">
        <h3>Profile name: N/A</h3>
        <h3>Status: Waiting for user input</h3>
    </div>
</div>

    Voir Bootstrap, documentation sur leur système de grille.

    InformationsquelleAutor SeeMeCode