Bootstrap Use .pull-prawo bez konieczności hardcode ujemny margin-top

Question

To jest mój kod (proszę zobaczyć skrzypce here):

<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> 

Chcę #login-box mieć .pull-right i znajdować się na tej samej wysokości co p. Mogę użyć margin-top: -100px, ale to źle działa.

Jak mogę uzyskać #login-box na tej samej wysokości co p bez kodowania negatywnego margin-top?

Answer 1

elementy Float będą renderowane w wierszu są one zazwyczaj w układzie. Aby rozwiązać ten problem, masz dwie możliwości:

Przenieś nagłówek i p po oknie logowania:

<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> 

lub obejmują lewy blok w rozkładaną lewo div i dodać clearfix na dole

<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> 

Answer 2

po prostu wstaw #login-box przed <h2>Welcome</h2> będzie w porządku.

<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> 

tutaj jest jsfiddle http://jsfiddle.net/SyjjW/4/

Answer 3

Utrzymuj H2 w górę, a potem w lewo na pull-p-prawo i pociągnąć logowania na skrzynce

<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> 

domyślne wyrównanie pionowe na pływających skrzynkach to linia podstawowa, więc "Proszę się zalogować" dokładnie wyrównuje się z "Nazwą użytkownika" (sprawdź, zmieniając prawą stronę do przeciągnięcia w lewo).