ट्विटर बूटस्ट्रैप

Question

के साथ फॉर्म-क्षैतिज के अंदर सामान्य (लंबवत) रूप। मैं एक ऐसा फॉर्म बनाना चाहता हूं जिसमें पहले स्तर पर क्षैतिज लेआउट हो, लेकिन फिर एक पंक्ति के भीतर एक "इनलाइन" हो सकता है जिसे मैं चाहता हूं एक लंबवत (डिफ़ॉल्ट) लेआउट। क्या इसे हासिल करने का कोई आसान तरीका है?

नोट:.form-inline जो मैं ढूंढ रहा हूं वह नहीं करता है, क्योंकि यह अंदरूनी लेबल इनपुट के शीर्ष पर नहीं रखता है।

अब तक मैं कुछ इस तरह है:

<div class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label"> 
      outer label 
     </label> 
     <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###"> 
      ### INLINE FORM WITH SAME STRUCTURE IS HERE ### 
     </div> 
    </div> 
</div> 

Answer 1

बूटस्ट्रैप डिफ़ॉल्ट रूप से ऐसा नहीं कर सकते, लेकिन मैं अपने कांटा में यह शामिल किया है https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

कृपया Jasny के एक्सटेंशन का उपयोग http://jasny.github.com/bootstrap बूटस्ट्रैप के लिए विचार करें

या सिर्फ इस सीएसएस का उपयोग

.form-vertical .form-horizontal .control-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .control-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
} 
.form-horizontal .form-vertical .controls { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.control-group .control-group { 
    margin-bottom: 0; 
} 

,210

एचटीएमएल

<form class="form-horizonal"> 
    # Horizal controls here 

    <div class="form-vertical"> 
     <div class="control-group"> 
      <label class="control-label">Label</label> 
      <div class="controls">Something here</div> 
     </div> 
    </div> 
</form> 

Answer 2

के साथ मैं अनिश्चित था आप के लिए वास्तव में क्या देख रहे थे लेकिन मुझे लगता है कि करने की कोशिश की।

मैंने कई फॉर्म तत्वों के साथ दूसरी पंक्ति दो लंबवत रेखाओं के साथ एक फॉर्म बनाया है।

मैंने ऐसा करने के लिए इनलाइन-ब्लॉक का उपयोग किया।

http://jsbin.com/icoduh/1/edit

Answer 3

यहाँ @ Jasny-arnold-daniels सीएसएस बूटस्ट्रैप 3 के लिए अद्यतन 3 फार्म समूह में है की जगह नियंत्रण समूह, प्रपत्र नियंत्रण की जगह नियंत्रण। चौड़ाई में @ user9645 के बदलाव की भी आवश्यकता है। नई सीएसएस है:

.form-vertical .form-horizontal .form-group > label { 
    text-align: left; 
} 
.form-horizontal .form-vertical .form-group > label { 
    float: none; 
    padding-top: 0; 
    text-align: left; 
    width: 100% 
} 
.form-horizontal .form-vertical .form-control { 
    margin-left: 0; 
} 
.form-horizontal .form-vertical.form-actions, 
.form-horizontal .form-vertical .form-actions { 
    padding-left: 20px; 
} 
.form-group .form-group { 
    margin-bottom: 0; 
} 

Answer 4

आप केवल प्रपत्र चारों ओर उस वर्ग के साथ एक आवरण div डाल के बजाय बूटस्ट्रैप 3. के लिए कस्टम सीएसएस लिखने प्रपत्र टैग पर फार्म क्षैतिज के अपने वर्ग डालने की जरूरत नहीं है तत्व जिन्हें आप क्षैतिज होना चाहते हैं (और क्षैतिज वस्तुओं के लिए स्तंभ-आकार वर्गों का समर्थन करना)।

उदाहरण के लिए, इस काम करेगा:

<form> 
    <div class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-sm-2 control-label">I'm a horizontal form element</label> 
     <div class="col-sm-10"> 
     <input type="text" class="form-control"> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label>I'm a vertical form element</label> 
    <input type="text" class="form-control"> 
    </div> 
</form> 

यह काम करता है क्योंकि खड़ी फॉर्म स्वतः कोई वर्ग स्पष्ट रूप से कहा के साथ एक फार्म के लिए प्रयोग किया जाता है। here दस्तावेज़ों में 'कक्षा की कमी' देखी जा सकती है।