बूटस्ट्रैप 3 पर इनपुट चौड़ाई

Question

फिर से अपडेट करें: मैं वास्तव में प्रश्न को समझने के बिना उत्तर जोड़ने से लोगों को रखने के लिए शीर्ष उत्तर का चयन करके इस प्रश्न को बंद कर रहा हूं। वास्तव में ग्रिड का उपयोग किए बिना या अतिरिक्त सीएसएस को जोड़ने के बिना कार्यक्षमता में निर्माण के साथ ऐसा करने का कोई तरीका नहीं है। यदि आप ऐसे help-blockतत्वों के साथ काम कर रहे हैं जो उदाहरण के लिए एक छोटे इनपुट से परे जाने की जरूरत है, लेकिन वे 'बिल्ड-इन' नहीं हैं। यदि यह एक मुद्दा है मैं अतिरिक्त सीएसएस वर्ग है जो आप BS3 चर्चा में पा सकते हैं उपयोग करने की अनुशंसा यहाँ । अब जब बीएस 4 बाहर हो गया है, तो इसमें शामिल करने के लिए शामिल आकार शैलियों का उपयोग करना संभव है, इसलिए यह बहुत लंबे समय तक प्रासंगिक नहीं रहने वाला है। इस लोकप्रिय SO प्रश्न पर अच्छे इनपुट के लिए सभी का धन्यवाद।

अपडेट: यह सवाल खुला रहता है क्योंकि यह ग्रिड का सहारा लिए बिना इनपुट चौड़ाई का प्रबंधन करने के लिए बीएस में अंतर्निहित कार्यक्षमता के बारे में है (कभी-कभी उन्हें स्वतंत्र रूप से प्रबंधित किया जाना चाहिए)। मैं पहले से ही इसे प्रबंधित करने के लिए कस्टम कक्षाओं का उपयोग करता हूं इसलिए यह बुनियादी सीएसएस पर नहीं है। कार्य बीएस फीचर चर्चा सूची में है और अभी तक संबोधित नहीं किया गया है।

मूल प्रश्न: कोई भी बीएस 3 पर इनपुट चौड़ाई का प्रबंधन करने का एक तरीका है? मैं उस कार्यक्षमता को जोड़ने के लिए वर्तमान में कुछ कस्टम क्लासेस का उपयोग कर रहा हूं, लेकिन हो सकता है कि मैं कुछ गैर-प्रलेखित विकल्पों से चूक गया हो।

वर्तमान डॉक्स .col-lg-x का उपयोग करने के लिए कहते हैं, लेकिन यह स्पष्ट रूप से काम नहीं करता है क्योंकि यह केवल कंटेनर div पर लागू किया जा सकता है जो तब सभी प्रकार के लेआउट / फ्लोट मुद्दों का कारण बनता है।

यहाँ एक बेला है। अजीब है कि फ़िडल पर मैं आकार-समूह को आकार देने के लिए भी नहीं मिल सकता।

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Comments

इन चौड़ाई का प्रबंधन करने के लिए बूटस्ट्रैप का उपयोग क्यों करें? यह उस पर विशेष रूप से अच्छा नहीं लगता है, और यह जटिलता का परिचय देता है।

— Eamon Nerbonne

इसके लिए, @Eamon बूटस्ट्रैप का उपयोग क्यों करें? आपके बाकी तत्वों के साथ उत्तरदायी डिज़ाइन और संरेखण, जो बूटस्ट्रैप संभाल रहा है, दिमाग में आता है। और वैसे भी, सवाल का पूरा बिंदु जटिलता को पेश किए बिना यह कैसे करना है।

— ctb

@ctb: सादा सीएसएस इस तरह के मुद्दों को ठीक से संभालता है; बूटस्ट्रैप की अतिरिक्त जटिलता की कोई आवश्यकता नहीं है।

— ईमोन नेरबोन

इतनी प्रतीक्षा, क्या इस प्रश्न का उत्तर दिया गया था? 38 अपवोट बहुत है।

— किश्ती

@rook - जवाब है कि नहीं, उनकी चर्चा सूची में है, हालांकि इसमें कोई द्वैध कार्यशीलता नहीं है। हालाँकि, विकल्प के रूप में वहाँ कुछ उपलब्ध कराए जाते हैं जब तक कि / अगर बीएस वास्तव में इसे जोड़ता है।

— साइबरबॉम्बट

Answer 1

आप जो करना चाहते हैं वह निश्चित रूप से प्राप्त करने योग्य है।

आप जो चाहते हैं, वह प्रत्येक 'समूह' को एक पंक्ति में लपेटना है, न कि पूरे फॉर्म को केवल एक पंक्ति के साथ। यहाँ:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

मैं बना नया jsfiddle : नई jsfiddle

ध्यान दें कि नई फ़ाइडल में, मैंने 'col-xs-5' भी जोड़ा है ताकि आप इसे छोटी स्क्रीन में भी देख सकें - इन्हें हटाने से कोई फ़र्क नहीं पड़ता। लेकिन अपनी मूल कक्षाओं में ध्यान रखें, आप केवल 'col-lg-1' का उपयोग कर रहे हैं। इसका मतलब है कि यदि स्क्रीन चौड़ाई 'lg' मीडिया क्वेरी आकार से छोटी है, तो डिफ़ॉल्ट ब्लॉक व्यवहार का उपयोग किया जाता है। मूल रूप से केवल 'col-lg-1' को लागू करने से, जो तर्क आप नियोजित कर रहे हैं वह है:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

अधिक जानकारी के लिए बूटस्ट्रैप 3 ग्रिड सिस्टम देखें । मुझे आशा है कि मैं स्पष्ट था अन्यथा मुझे पता है और मैं विस्तार से बताऊंगा।

Comments

हां, जो मैंने @Skelly के लिए अपनी टिप्पणी में रखा है - इस पर एक खुला मुद्दा है और वे एक बार चीजों को निपटाने के बाद इसे संबोधित करेंगे। पंक्ति जोड़ने से हमें वह नहीं मिल रहा है जो मैं अतिरिक्त मार्कअप के कारण देख रहा हूं जो कि उचित कक्षाओं में किए जाने पर पूरी तरह से अनावश्यक है - जो मैंने किया है। मैंने प्रतिशत चौड़ाई के साथ .input1-12 बनाया है और मैं बस उस इनपुट पर लागू करता

— हूं

मैंने इस पोस्ट के बारे में बहुत कुछ नहीं पढ़ा है, लेकिन ... "बूटस्ट्रैप की पूर्वनिर्धारित ग्रिड कक्षाओं का उपयोग लेबल और प्रपत्र नियंत्रण के समूहों को एक क्षैतिज लेआउट में रूप-पंक्ति-क्षैतिज रूप में जोड़कर करने के लिए करें। ऐसा करने के लिए .form- समूहों का व्यवहार करें। ग्रिड पंक्तियों के रूप में, इसलिए .row की कोई आवश्यकता नहीं है। "

— dtc

@ dtc हालांकि इनपुट चौड़ाई के लिए ज्यादा मदद नहीं करता है?

— जैक्स

@shadowf और अगर मैं किसी इनपुट को उसके लेबल से कम करना चाहता हूं तो क्या होगा? क्या मुझे अभी तक एक और जोड़ी में एक इनपुट डालना है ?

— पावरगैमर

धन्यवाद जो मेरे लिए काम करता है। वैसे इसके संडे 10 बजे मेरे लिए :-) जैसा कि मैं ग्लोब के दूसरी तरफ हूं।

— आनंद

Answer 2

बूटस्ट्रैप 3 में

आप बस एक कस्टम शैली बना सकते हैं:

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

फिर इसे नियंत्रणों में शामिल करने के लिए इस तरह जोड़ें:

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

इस तरह से आपको अपने HTML में लेआउट के लिए अतिरिक्त मार्कअप नहीं रखना होगा।

Comments

यह जवाबों पर दूर तक जीतता है। यह साफ है, पुन: प्रयोज्य है, और बस काम करता है। वास्तव में, इसे बूटस्ट्रैप में डिफ़ॉल्ट रूप से रखा जाना चाहिए क्योंकि यह एक बहुत ही सामान्य झुंझलाहट है। बहुत कम ही आप शुद्ध ब्लॉक फॉर्म चाहते हैं।

— बावेहरा

मैं इस समाधान की कोशिश की, लेकिन यह मेरे लिए काम नहीं किया। मैं अपने क्षेत्र की चौड़ाई को सीमित करना चाहता था इसलिए मैंने कस्टम शैली में 'चौड़ाई: 200px' का उपयोग किया, लेकिन इससे चौड़ाई में बदलाव नहीं हुआ। केवल जब मैंने 'अधिकतम-चौड़ाई: 200px' सेट किया, तो क्या मुझे सही परिणाम मिला।

— पौलू ६२

जब मैं इसका उपयोग करता हूं तो चौड़ाई फॉर्म-कंट्रोल क्लास ऑटो चौड़ाई को ओवरराइड नहीं करेगी।

— जॉनी

यहाँ टिप्पणियों से सहमत - मैंने वास्तव में यहाँ देखने से पहले यह कोशिश की थी, यह चूक को अधिलेखित करने के लिए नहीं लगता है ... अनिश्चित क्यों कुछ कस्टम शैलियों करते हैं और कुछ नहीं करते हैं।

— Wil

यहाँ एक

— फिडेल

Answer 3

ASP.net MVC सामग्री- Site.cs पर जाएं और इस पंक्ति को निकालें या टिप्पणी करें:

input,
select,
textarea {
    /*max-width: 280px;*/
}

Comments

यदि आप फ़िडल को देखते हैं, तो आप देखेंगे कि ओपी खेतों को छोटा बनाना चाहता है, बड़ा नहीं। यहाँ बड़ी समस्या यह है कि उनकी साइट साइट का संदर्भ नहीं दे रही है।

— Bmize729

मुझे नहीं पता था कि सीएसएस नियम था और यह मुझे पागल कर रहा था कि मेरी निर्दिष्ट चौड़ाई को नजरअंदाज किया जा रहा था। धन्यवाद।

— माइकल एस। मिलर

Answer 4

मुझे लगता है कि आपको इनपुट को एक के अंदर लपेटने की जरूरत है col-lg-4, और फिर अंदर form-groupऔर यह सब एक में समाहित हो जाता है form-horizontal।

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

बूटप्ले पर डेमो - http://bootply.com/78156

संपादित करें: बूटस्ट्रैप 3 डॉक्स से ।।

बूटस्ट्रैप में इनपुट्स, सिलेक्ट्स और टेक्सटेरियस डिफ़ॉल्ट रूप से 100% चौड़े हैं। इनलाइन फॉर्म का उपयोग करने के लिए, आपको फॉर्म के नियंत्रण में एक चौड़ाई निर्धारित करनी होगी।

तो एक और विकल्प सीएसएस का उपयोग करके एक विशिष्ट चौड़ाई निर्धारित करना है:

.form-control {
    width:100px;
}

या, col-sm-*'फॉर्म-समूह' पर लागू करें ।

Comments

आपको पंक्ति-समूह को प्रपत्र-समूह में जोड़ना है - मैंने बूटस्ट्रैप टीम के साथ एक चर्चा की और उन्होंने अपनी योजना सूची में इनपुट विशिष्ट चौड़ाई नियंत्रण की संभावना को जोड़ा है। इस बीच हमें पूर्ण ग्रिड का उपयोग करना होगा। यदि आप आगे बढ़ते हैं और प्रपत्र-समूह वर्ग में पंक्ति जोड़ते हैं और क्षैतिज कक्षा निकालते हैं तो मैं इस उत्तर को चिह्नित करूँगा। यहां

— वर्किंग फिडेल

+ @ यशुआ - +1 महान उदाहरण। यह इनपुट-ग्रुप क्लास के साथ भी काम करता है, जो मुझे परेशान कर रहा था।

— डेविड रोबिन्स

Answer 5

वर्तमान डॉक्स का उपयोग करना कहते हैं .col-xs-x, lg नहीं। तो मैं बेला में कोशिश करते हैं और यह काम करने लगता है:

http://jsfiddle.net/tX3ae/225/

लेआउट रखने के लिए शायद आप बदल सकते हैं जहाँ आप कक्षा "पंक्ति" को इस तरह से रखते हैं:

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

Comments

छोटे उपकरणों के लिए काम नहीं करता है क्योंकि इनपुट-फ़ील्ड बहुत छोटा हो जाता है

— फ्रेंब्रन

Answer 6

<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

इनपुट में बाधा के लिए form.group में वर्ग जोड़ें

Comments

यह वास्तव में काम नहीं करता है। यह प्रत्येक बाद वाले तत्व को इस एक के बगल में तैरने का कारण बनता है। आपको हर प्रपत्र समूह पर कक्षा पंक्ति के साथ एक div जोड़ना होगा जो हास्यास्पद है।

— सायबरवॉम्बैट

Answer 7

यदि आप Visual Studio 15 में Master.Site टेम्पलेट का उपयोग कर रहे हैं, तो बेस प्रोजेक्ट में "Site.css" है जो फॉर्म-कंट्रोल फ़ील्ड की चौड़ाई को बढ़ाता है।

मैं अपने पाठ बक्सों की चौड़ाई लगभग 300px से अधिक चौड़ी पाने के लिए नहीं मिला। मैंने हर चीज की कोशिश की और कुछ भी काम नहीं किया। मैंने पाया कि Site.css में एक सेटिंग है जो समस्या का कारण बन रही थी।

इससे छुटकारा पाएं और आप अपने क्षेत्र की चौड़ाई पर नियंत्रण पा सकते हैं।

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

Comments

धन्यवाद आदमी, चार साल बाद इसने मुझे बचाया

— रिच

Answer 8

मुझे पता है कि यह एक पुराना धागा है, लेकिन मैंने इनलाइन फॉर्म के साथ एक ही मुद्दे का अनुभव किया, और ऊपर दिए गए विकल्पों में से कोई भी समस्या हल नहीं हुई। इसलिए मैंने अपना इनलाइन फॉर्म इस तरह तय किया: -

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

यही मेरा समाधान था। बिट हैकिंग हैक, लेकिन इनलाइन फॉर्म के लिए काम किया।

Answer 9

आप शैली विशेषता जोड़ सकते हैं या आप css फ़ाइल में इनपुट टैग के लिए एक परिभाषा जोड़ सकते हैं।

विकल्प 1: शैली विशेषता को जोड़ना

<input type="text" class="form-control" id="ex1" style="width: 100px;">

विकल्प 2: सीएसएस में परिभाषा

input{
  width: 100px
}

आप ऑटो में 100px बदल सकते हैं

मुझे उम्मीद है कि मैं मदद कर सकता हूं।

Answer 10

बूटस्ट्रैप 3 में

सभी शाब्दिक <इनपुट>, <textarea>, और <select> .form-control वाले तत्व चौड़ाई पर सेट हैं: 100%; डिफ़ॉल्ट रूप से।

http://getbootstrap.com/css/#forms-example

ऐसा लगता है, कुछ मामलों में, हमें मैन्युअल रूप से इनपुट के लिए अधिकतम चौड़ाई निर्धारित करनी होगी।

वैसे भी, आपका उदाहरण काम करता है। बस इसे एक बड़ी स्क्रीन के साथ जांचें, ताकि आप नाम और ईमेल फ़ील्ड को (col-lg-1 + col-lg-1 और आपके पास 12 कॉलम हों) के 2/12 मिल रहे हैं। लेकिन अगर आपके पास एक छोटी स्क्रीन है (बस अपने ब्राउज़र का आकार बदलें), तो इनपुट का विस्तार पंक्ति के अंत तक होगा।

Answer 11

आपको साधारण सीएसएस देने की जरूरत नहीं है :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Answer 12

यदि आप बूटस्ट्रैप के इनपुट तत्वों की चौड़ाई को कम करने या बढ़ाने के लिए देख रहे हैं, तो मैं max-widthCSS में उपयोग करूंगा ।

यहाँ एक बहुत ही सरल उदाहरण मैंने बनाया है:

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

मैंने पूरे फॉर्म की अधिकतम चौड़ाई 500px निर्धारित की है। इस तरह आपको बूटस्ट्रैप के किसी भी ग्रिड सिस्टम का उपयोग करने की आवश्यकता नहीं होगी और यह फ़ॉर्म को उत्तरदायी भी बनाए रखेगा।

Answer 13

मैं भी उसी समस्या से जूझ रहा हूं, और यह मेरा समाधान है।

HTML स्रोत

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

एक अन्य div वर्ग के साथ कवर इनपुट कोड

सीएसएस स्रोत

.input_width{
   width: 450px;
}

कवर किए गए div वर्ग पर कोई भी चौड़ाई या मार्जिन सेटिंग दें।

बूटस्ट्रैप की इनपुट चौड़ाई हमेशा 100% के रूप में डिफ़ॉल्ट होती है, इसलिए चौड़ाई उस कवर की गई चौड़ाई का अनुसरण करती है।

यह सबसे अच्छा तरीका नहीं है, लेकिन सबसे आसान और एकमात्र समाधान है जो मैंने समस्या को हल किया।

आशा है कि इससे मदद मिली।

Answer 14

मुझे नहीं पता कि सभी ने सामग्री फ़ोल्डर में site.css फ़ाइल की अनदेखी क्यों की है। इस फाइल में लाइन 22 को देखें और इनपुट को नियंत्रित करने के लिए आपको सेटिंग्स दिखाई देंगी। ऐसा लगेगा कि आपकी साइट इस शैली पत्रक का संदर्भ नहीं दे रही है।

मैंने इसे जोड़ा:

input, select, textarea { max-width: 280px;}

अपने बेला के लिए और यह ठीक काम करता है।

आपको कभी भी bootstrap.css या bootstrap.min.css को अपडेट नहीं करना चाहिए। ऐसा करने से आप असफल हो जाएंगे जब बूटस्ट्रैप अपडेट हो जाएगा। यही कारण है कि site.css फ़ाइल शामिल है। यह वह जगह है जहां आप उस साइट में बदलाव कर सकते हैं जो अभी भी आपको उस उत्तरदायी डिज़ाइन को देगी जो आप खोज रहे हैं।

यहाँ यह काम के साथ बेला है

Answer 15

style=""इनपुट फ़ील्ड के लिए शर्तें जोड़ें और परिभाषित करें , इसके बारे में जाने का सबसे आसान तरीका है: उदाहरण:

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 16

बूटस्ट्रैप 'इनपुट फ़ील्ड्स' की विशेषताओं को नियंत्रित करने के लिए वर्ग 'फॉर्म-इनपुट' का उपयोग करता है। बस, अपने सीएसएस फ़ाइल या हेड सेक्शन में वांछित चौड़ाई, बॉर्डर, टेक्स्ट साइज़ आदि के साथ अपना स्वयं का 'फॉर्म-इनपुट' वर्ग जोड़ें।

(या फिर, सीधे शरीर अनुभाग में इनपुट विशेषताओं में आकार = '5' इनलाइन कोड जोड़ें।)

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Answer 17

बूटस्ट्रैप 3 मैंने निम्नलिखित का उपयोग करके एक अच्छा उत्तरदायी फॉर्म लेआउट प्राप्त किया:

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>