web-dev-qa-db-fra.com

Bootstrap: Utilisez .pull-right sans avoir à coder en dur une marge négative

Ceci est mon code (s'il vous plaît voir violon ici ):

<div class='container'>
    <div class='hero-unit'>
        <h2>Welcome</h2>

        <p>Please log in</p>
        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>
    </div>
</div>

Je veux que #login-box ait .pull-right et soit à la même hauteur que p. Je peux utiliser margin-top: -100px mais cela me semble mal.

Comment puis-je avoir #login-box à la même hauteur que p sans coder en dur un margin-top négatif?

htmlcsstwitter-bootstrap
28
Randomblue

Les éléments flottants seront rendus à la ligne où ils se trouvent normalement dans la mise en page. Pour résoudre ce problème, vous avez deux choix:

Déplacez l'en-tête et le p après la boîte de connexion:

<div class='container'>
    <div class='hero-unit'>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <h2>Welcome</h2>

        <p>Please log in</p>

    </div>
</div>

Ou enfermez le bloc de gauche dans un div à gauche et ajoutez un correctif en bas

<div class='container'>
    <div class='hero-unit'>

        <div class="pull-left">

          <h2>Welcome</h2>

          <p>Please log in</p>

        </div>

        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>

        <div class="clearfix"></div>

    </div>
</div>
57
Dutow

il suffit de mettre #login-box avant que <h2>Welcome</h2> soit ok.

<div class='container'>
    <div class='hero-unit'>
        <div id='login-box' class='pull-right control-group'>
            <div class='clearfix'>
                <input type='text' placeholder='Username' />
            </div>
            <div class='clearfix'>
                <input type='password' placeholder='Password' />
            </div>
            <button type='button' class='btn btn-primary'>Log in</button>
        </div>
        <h2>Welcome</h2>

        <p>Please log in</p>

    </div>
</div>

voici jsfiddle http://jsfiddle.net/SyjjW/4/

3
pktangyue

Gardez le h2 en haut, puis tirez à gauche sur le p et tirez à droite sur la boîte de connexion

<div class='container'>
  <div class='hero-unit'>

    <h2>Welcome</h2>

    <div class="pull-left">
      <p>Please log in</p>
    </div>

    <div id='login-box' class='pull-right control-group'>
        <div class='clearfix'>
            <input type='text' placeholder='Username' />
        </div>
        <div class='clearfix'>
            <input type='password' placeholder='Password' />
        </div>
        <button type='button' class='btn btn-primary'>Log in</button>
    </div>

    <div class="clearfix"></div>

  </div>
</div>

l'alignement vertical par défaut sur les cases flottantes est la ligne de base. Par conséquent, le mot de passe "Veuillez vous connecter" s'aligne exactement sur le "Nom d'utilisateur" (cochez la case en sélectionnant Pull-right en pull-right).

0
thebjorn