बूटस्ट्रैप का उपयोग कर एक फॉर्म क्षैतिज केंद्र कैसे करें?

Question

हाय मैं स्क्रीन बूटस्ट्रैप 2. का उपयोग कर के बीच में एक लॉगिन प्रपत्र स्थिति मैं ऑफसेट आदि का उपयोग कर कई संयोजनों की कोशिश की है कोशिश कर रहा हूँ लेकिन मैं अनु किस्मत है लगता नहीं है ..

<div class="row-fluid"> 
    <form action='' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'> 
    ... 
    </form> 
</div> 

कोई मैं इसे कैसे प्राप्त कर सकता हूं इस पर सुझाव?

Answer 1

बस कक्षाओं को 2 * ऑफ़सेट क्लास + अवधि वर्ग = 12 कॉलम सेट करें।

अर्थात्: .offset4.span4

Answer 2

आप निम्नलिखित @ अचार के जवाब से ग्रिड प्रणाली शुरू उपयोग करना चाहते हैं। यह आपके फॉर्म वाले स्पैन किए गए कॉलम को केंद्रित करेगा। यदि आप उस अवधि में केंद्रित केंद्र चाहते हैं, तो आपको अपने प्रश्न पर अपनी टिप्पणी में @ kajo द्वारा उल्लिखित चीजों जैसे कुछ और काम करना होगा।

@ पिकले के उत्तर पर विस्तृत करने के लिए, यहां कुछ नमूना कोड है जो डिफ़ॉल्ट 12-कॉलम ग्रिड में 4 कॉलम की अवधि को केंद्रित करता है। आप की जरूरत है स्तंभों की एक अलग संख्या फैला, का उपयोग @ अचार के सूत्र (लेकिन ध्यान रखें फैला स्तंभों की अपनी संख्या सम संख्या में होना चाहिए)

<div class="container"> 
    <div class="row"> 
    <div class="offset4 span4"> 
     .. form goes here .. 
    </div> 
    </div> 
</div> 

Answer 3

दुर्भाग्य से, वर्तमान में ऑफसेट वर्ग के भीतर ठीक से काम नहीं करता है पंक्ति तरल पदार्थ तत्व।

https://github.com/twitter/bootstrap/pull/2394

आप पंक्ति-तरल पदार्थ तत्व का उपयोग करना चाहते हैं, तो आप अपनी सामग्री div से पहले ही में एक br टैग के साथ एक span4 जोड़ सकते हैं।

Answer 4

इस केंद्र मुद्दे के साथ इतना संघर्ष करने के बाद, मैं अपने ही tweeks बनाने में कामयाब रहे

सीएसएस:

.control-group.center{ float:none;margin:0 auto;width:400px;margin-bottom:20px;} 
.control-group .field {width:140px;float:left} 
.control-group .l {width:120px;float:left;line-height: 29px;} 
.row-fluid .offset4{ 
    display: block!important; 
    float: none!important; 
    width: 100%!important; 
    margin-left: 0!important; 
    padding:0 80px; 
} 
@media (max-width: 497px){ 
    .control-group.center {text-align: center;float:inherit;width: auto} 
    .control-group .field,.control-group .l {width:120px;float:none;text-align: center;width: auto} 
} 

HTML:

<div class="container"> 
     <div class="row-fluid"> 
     <div class="offset4 span2"> 

      <form class="form-horizontal" action="enviar-pedido.php" method="post"> 
      <fieldset> 
       <legend>Ingrese sus datos:</legend> 
       <div class="control-group center"> 
       <div class="l">Nombre</div> <div class="field"><input type="text" id="txtNombre" name="txtNombre" placeholder="Nombre"></div> 
       </div> 
       <div class="control-group center"> 
       <div class="l">Email</div> <div class="field"><input type="text" id="txtEmail" name="txtEmail" placeholder="Email"></div> 
       </div> 
       <div class="control-group center"> 
       <div class="l">Teléfono</div> <div class="field"><input type="text" id="txtTelefono" name="txtTelefono" placeholder="Telefono"></div> 
       </div> 
      </fieldset> 
      </form> 
     </div> 
     </div> 
    </div> 

अब यह अंत में हमेशा के लिए है केन्द्रित ब्राउज़र का आकार बदलने पर भी (क्रोम और फ़ायरफ़ॉक्स)

Answer 5

आम तौर पर सभी स्पैन बाईं ओर तैरते हैं। तो आपको इसे किसी को भी फ़्लोट करना होगा और फिर मार्जिन को ऑटो पर सेट करना होगा।

कुछ इस तरह:

<div class="span8" style="float:none; margin:0 auto"></div>