मैं इन बूटस्ट्रैप फॉर्म आइटम्स को संरेखित कैसे करूं?

मैं पहली बार बूटस्ट्रैप का उपयोग कर रहा हूं, और बाईं ओर क्षैतिज इस फ़ॉर्म को संरेखित करने में बहुत सारी परेशानी हो रही है।मैं इन बूटस्ट्रैप फॉर्म आइटम्स को संरेखित कैसे करूं?

सूची आइटम क्षैतिज हैं, जैसा कि वे होना चाहिए, लेकिन मैं नियंत्रण-लेबल (फॉर्म लेबल के लिए बूटस्ट्रैप वर्ग) सभी को एक ही स्थिति में बाईं ओर ले जाना चाहता हूं।

फॉर्म 7 की अवधि के साथ एक div में निहित है, क्योंकि मेरी साइट दो कॉलम हैं - 7 और 4 कॉलम।

नीचे मेरा HTML है। यदि आप इस पृष्ठ http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms पर "क्षैतिज रूप" के अंतर्गत देखते हैं, तो आप देखेंगे कि लेबल गठबंधन किए गए हैं, लेकिन बिल्कुल बाएं-गठबंधन नहीं हैं ताकि लेबल की शुरुआत लंबवत स्थिति में हो।

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label" for="inputSaving">What are you saving for?</label> 
     <div class="controls"> 
      <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="description">Add a short description</label> 
     <div class="controls"> 
      <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="categoryselect">Choose a Category</label> 
     <div class="controls"> 
      <select class="span4"> 
       <!-- Add some CSS and JS to make a placeholder value--> 
       <option value="Kittens">Kittens</option> 
       <option value="Keyboard Cat">Keyboard Cat</option> 
       <option value="Twitter Bird">Twitter Bird</option> 
      </select> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="goal">Your Saving Goal</label> 
     <div class="controls"> 
      <input type="text" class="span4" id="goal"> 
     </div> 
    </div> 
    <button class="btn btn-large btn-primary" type="button">Submit</button> 
</form>

स्रोत

2013-01-10 Tom Maxwell

इस प्रश्न के लिए सही कोई जवाब नहीं दिया गया है? –

आप कह रहे हैं, तो आपकी समस्या को छोड़ दिया करने के लिए कैसे प्रपत्र लेबल संरेखित, देख अगर यह मदद करता है कि:
http://jsfiddle.net/panchroma/8gYPQ/

पाठ के अनुरूप/सीएसएस में दाएँ से बाएँ बदलने का प्रयास करें

.form-horizontal .control-label{ 
/* text-align:right; */ 
text-align:left; 
background-color:#ffa; 
}

शुभकामनाएं!

स्रोत

2013-01-11 03:01:29

एचटीएमएल अपडेट किया गया और सबमिट बटन के संरेखण को ठीक किया गया: http://jsfiddle.net/n3f25Lkd/ – ganders

मैं सीधे ढांचे के स्रोत कोड को संशोधित करने की अनुशंसा नहीं करता, खासकर अगर आप इसे अद्यतित रखने में सक्षम होना चाहते हैं - वह तब तक है जब तक आप रिपोजिटरी को फोर्क करने और अपस्ट्रीम कोड को वापस मर्ज करने के इच्छुक नहीं हैं। – djule5

इस बात पर सहमत हुए कि फ्रेमवर्क स्रोत कोड @ djule5 को संशोधित करना एक अच्छा विचार नहीं है, जो मैं सुझाव दे रहा था कि उपरोक्त साइट के सीएसएस में जोड़ना है ताकि यह बूटस्ट्रैप स्टाइल को ओवरराइड कर सके। फिर आप बूटस्ट्रैप को अपडेट कर सकते हैं और अनुकूलन खो नहीं सकते हैं, क्या यह समझ में आता है? –

मूल बूटस्ट्रैप सीएसएस वर्ग को बदलने के बजाय एक नई सीएसएस फ़ाइल बनाएं जो डिफ़ॉल्ट शैली को ओवरराइड करेगी।

सुनिश्चित करें कि आप bootstrap.css फ़ाइल को शामिल करने के बाद नई सीएसएस फ़ाइल शामिल करें।

नई सीएसएस फ़ाइल में ऐसा लगता है कि आप बूटस्ट्रैप 2 का उपयोग कर रहे हैं, मुझे यकीन है कि अगर उपलब्ध है, बूटस्ट्रैप 3 पर विचार करें, जब तक नहीं कर रहा हूँ कर

.form-horizontal .control-label{ 
    text-align:left !important; 
}

स्रोत

2014-12-17 20:32:54

मैं कभी भी उपयोग करने की सलाह नहीं दूंगा! यदि कोई विकल्प है तो महत्वपूर्ण: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – cederlof

कृपया समाधान का उपयोग करें टिम बी जेम्स नीचे। जरूरी! एक खराब अभ्यास –

"पुल-बाएँ" तुम क्या जरूरत है, यह एक बड़ा पुनर्विक्रय है! ... बूटस्ट्रैप 3 के लिए, लेकिन आपको यह सुनिश्चित करने की ज़रूरत है कि आपके पास प्रत्येक पंक्ति में 12 कॉलम भी हैं, अन्यथा आपको समस्याएं होंगी।

स्रोत

2015-03-04 15:59:20 SupportLocusDev

है "लेकिन आपको यह सुनिश्चित करने की ज़रूरत है कि आपके पास प्रत्येक पंक्ति में 12 कॉलम भी हैं, अन्यथा आपको समस्याएं होंगी" - सच नहीं। यदि आपके पास 12 से कम कॉलम परिभाषित हैं, तो आपका डेटा केवल आपके द्वारा परिभाषित कॉलम का उपभोग करेगा, फिर शेष कॉलम खाली होंगे। इसलिए, यदि आप col-x-4, col-x-5, col-x-1 को परिभाषित करते हैं, तो शेष 2 कॉलम खाली होंगे, और सब कुछ ठीक काम करना चाहिए। (ध्यान दें, यदि आप 12 से अधिक कॉलम परिभाषित करते हैं, तो 12 वीं कॉलम के बाद सब कुछ अगली पंक्ति में लपेट जाएगा) – ganders

बस मेरे दो सेंट। यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं तो मैं अपनी साइट की स्टाइलशीट में एक अतिरिक्त शैली जोड़ूंगा जो control-label की text-left शैली को नियंत्रित करता है।

यदि आप लेबल में text-left जोड़ना चाहते हैं, तो डिफ़ॉल्ट रूप से एक और शैली है जो इस .form-horizontal .control-label को ओवरराइड करती है। तो अगर आप जोड़ें:

.form-horizontal .control-label.text-left{ 
    text-align: left; 
}

फिर text-left शैली में बनाया गया सही ढंग से लेबल करने के लिए लागू किया जाता है।

स्रोत

2015-05-21 10:29:16

सही उत्तर –

या आप "बाएं" उत्तर कहेंगे ... हाहा –

-1

मुझे एक ही समस्या थी। मुझे bootstrap.min.css के भीतर समस्या मिली। आपको लेबल बदलने की जरूरत है: label {display:inline-block;} से label {display:block;}

स्रोत

2016-04-22 15:32:59

बस अपने लेबल में style="text-align: left" जोड़ें।

स्रोत

2017-05-03 15:19:25

मैं इन बूटस्ट्रैप फॉर्म आइटम्स को संरेखित कैसे करूं?

उत्तर

संबंधित मुद्दे