बूटस्ट्रैप: एक नकारात्मक मार्जिन टॉप हार्डकोड करने के बिना .pull-सही उपयोग

Question

यह मेरा कोड है (कृपया बेला 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> 

मैं #login-box चाहते .pull-right है और रूप में एक ही ऊंचाई पर होने के लिए p। मैं margin-top: -100px का उपयोग कर सकता हूं लेकिन यह गलत लगता है।

#login-boxp के समान margin-top पर हार्डकोड किए बिना #login-box कैसे हो सकता है?

Answer 1

फ्लोट तत्वों लाइन वे लेआउट में सामान्य रूप से कर रहे हैं पर रेंडर किया जाएगा है।

ले जाएँ शीर्ष लेख और लॉगिन बक्से के बाद पी:

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

या एक पुल छोड़ दिया div में छोड़ दिया ब्लॉक संलग्न है, और तल पर एक clearfix जोड़ने इसे ठीक करने के आपके पास दो विकल्प

<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

<h2>Welcome</h2> से पहले #login-box डालें ठीक है।

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

यहाँ jsfiddle http://jsfiddle.net/SyjjW/4/

Answer 3

शीर्ष पर h2 करते रहें, फिर पी पर पुल छोड़ दिया और प्रवेश-बॉक्स

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

पर पुल सही फ्लोट किए गए बक्से पर डिफ़ॉल्ट लंबवत-संरेखित आधार रेखा है, इसलिए "उपयोगकर्ता नाम" के साथ बिल्कुल "कृपया लॉग इन करें" (खींचने के लिए पुल-दाएं को बदलकर चेक करें)।