इनलाइन-फ़ॉर्म में बूटस्ट्रैप पूर्ण-चौड़ाई पाठ-इनपुट

Question

मैं एक टेक्स्टबॉक्स बनाने के लिए संघर्ष कर रहा हूं जो मेरे कंटेनर क्षेत्र की पूरी चौड़ाई को फिट करता है ।

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

जब मैं ऊपर करता हूं, तो दो फॉर्म तत्व इन-लाइन होते हैं, जैसा कि मुझे उम्मीद है, लेकिन कुछ कॉलम से अधिक नहीं लेते हैं, सबसे अच्छे रूप में। फायरबग में col-md-12div पर मंडराते हुए यह अपेक्षित पूर्ण चौड़ाई को दर्शाता है। यह केवल पाठ इनपुट है जो भरने के लिए प्रतीत नहीं होता है। मैंने इन-लाइन चौड़ाई मान जोड़ने की भी कोशिश की लेकिन यह कुछ भी नहीं बदला। मुझे पता है कि यह सरल होना चाहिए, बस अब वास्तव में गूंगा लग रहा है।

यहाँ एक पहेली है: http://jsfiddle.net/52VtD/4119/embedded/result/

संपादित करें:

चयनित उत्तर हर तरह से पूरी तरह से और एक अद्भुत मदद है। यह वही है जिसका मैंने उपयोग किया है। हालांकि मुझे लगता है कि मेरा प्रारंभिक मुद्दा वास्तव में विजुअल स्टूडियो 2013 के डिफ़ॉल्ट MVC5 टेम्पलेट के साथ एक समस्या थी। यह Site.css में शामिल था:

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

जाहिर है कि पाठ-इनपुट को उचित रूप से विस्तारित करने से रोक रहा था ... भविष्य के ASP.NET टेम्पलेट उपयोगकर्ताओं के लिए उचित चेतावनी ...

Comments

मैं डिफ़ॉल्ट MVC5 टेम्पलेट के साथ समस्या के बारे में आपकी खोज को दूसरा बनाना चाहता हूं। मैं बस इस मुद्दे पर शोध करने में एक घंटा बिताता हूं और (झूठा) को बूटस्ट्रैप पर कोसने से पहले मैंने jsfiddle में एक काम करने वाला नमूना पाया, जिसने मुझे एक स्वच्छ HTML पृष्ठ के साथ फिर से शुरू करने के लिए प्रेरित किया, और यह ठीक काम किया। उसके बाद ही मुझे पता चला कि वीएस २०३ का खाका था और इस पद पर आया था। अच्छाई जानता है कि अधिकतम-चौड़ाई के लिए निर्णय क्यों लिया गया, लेकिन यह यह दिखाने के लिए जाता है कि आपको अन्य लोगों के कोड का उपयोग करते समय सावधान रहना होगा। जब यह इस तरह के एक मुद्दे के साथ फंस मूल बातें वापस करने के लिए वसीयतनामा है।

— जेसन स्लाइनर्स

धन्यवाद, asp.net टेम्प्लेट का उपयोग करके भी, लेकिन मैंने पहले से ही इनपुट की अधिकतम-चौड़ाई को किसी पर सेट नहीं किया है, लेकिन यह अभी भी पूरी चौड़ाई नहीं लेता है, केवल अगर मैं इसे 100% मैन्युअल रूप से सेट करता हूं। लेकिन फिर इसके दाईं ओर का बटन नीचे चला जाता है, और मैं चाहता हूं कि यह उसी लाइन में रहे।

— रोनेन फिस्टिंगर

@Killnine आपके प्रश्न के संपादन ने मेरे सिरदर्द हल कर दिए। यह वास्तव में समस्या थी, आपके पोस्ट को संपादित करने के लिए धन्यवाद!

— फ्लेम_फिनिक्स

मैंने अपनी site.css फ़ाइल से CSS के उस बिट को हटा दिया है और मुझे अभी भी यही समस्या है। कोई विचार?

— dave317

Dayuuumn! इस के साथ संघर्ष कर रहा है और यह एक MVC मुद्दा है! पाठ्यपुस्तक के सीएसएस गुणों का निरीक्षण न करने के लिए मैं कितना मूर्ख हूं! इस पर ध्यान दिलाने के लिए धन्यवाद!

— हाजत

Answer 1

बूटस्ट्रैप डॉक्स इस बारे में कहते हैं :

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

सभी फॉर्म एलिमेंट्स के रूप में 100% की डिफ़ॉल्ट चौड़ाई तब मिलती है जब उन्हें क्लास मिलती है form-controlअगर आप form-inlineअपने फॉर्म में क्लास का उपयोग करते हैं तो लागू नहीं होता है ।

आप bootstrap.css पर एक नज़र डाल सकते हैं (या। जब भी आप चाहें जो भी पसंद करते हैं), जहाँ आपको यह भाग मिलेगा:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

शायद आपको इनपुट-समूहों पर एक नज़र डालनी चाहिए , क्योंकि मुझे लगता है कि उनके पास वास्तव में वह मार्कअप है जिसका आप उपयोग करना चाहते हैं ( यहाँ काम करना ):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

Comments

ऊपर मेरा संपादन देखें। मुझे लगता है कि ASP.NET टेम्पलेट में Site.css ने मुझे इस पर पा लिया हो सकता है। हालांकि, यह एक भयानक जवाब है और भविष्य के संदर्भ के लिए बहुत उपयोगी है।

— किलनीन

इनपुट समूह इस पर जाने का तरीका है। निजी तौर पर, मैं इनपुट समूह शैली को एक इनलाइन फॉर्म से मिलता जुलता समायोजित करता हूं, जब मुझे इनपुट के बगल में बटन नहीं चाहिए। बूटस्ट्रैप

— लेस के

अच्छा! मुझे पता है कि सवाल बूटस्ट्रैप-विशिष्ट है, लेकिन यदि कोई और इसे बूटस्ट्रैप (बूटस्ट्रैप लेस नहीं है) में छोड़ना चाहता है, तो साइट मैंने यहां प्रासंगिक शैलियों को निकाला है: stackoverflow.com/a/27413796/1243636

— henry

फिडेल में बूटस्ट्रैप लिंक टूट गया है। यह शायद बूटस्ट्रैप के एक नए संस्करण की ओर इशारा कर रहा है और फिडल अब काम नहीं कर रहा है।

— क्लो

@ च्लोए आप सही हैं, फ़िडेल बूटस्ट्रैप सीएसएस फ़ाइल का उपयोग कर रहा था जो अब मौजूद नहीं है। मैंने अभी फिडेल अपडेट किया है, यह फिर से काम कर रहा है।

— मोर्टन।

Answer 2

कुछ इस तरह से देखें:

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

Answer 3

जैसा कि एक समान प्रश्न में कहा गया है , input-groupकक्षा के उदाहरणों को हटाने का प्रयास करें और देखें कि क्या मदद करता है।

बूटस्ट्रैप का संदर्भ:

व्यक्तिगत रूप से नियंत्रण कुछ वैश्विक स्टाइलिंग को स्वचालित रूप से प्राप्त करते हैं। .Form-control के साथ सभी शाब्दिक, और तत्व चौड़ाई पर सेट हैं: 100%; डिफ़ॉल्ट रूप से। इष्टतम रिक्ति के लिए .form-group में लेबल और नियंत्रण लपेटें।

Comments

प्रति मोर्टेन यह इनलाइन रूपों पर लागू नहीं होता है। इस प्रकार, आपको इनपुट-समूह को 100% करने के लिए मजबूर करने की आवश्यकता है

— user441058

Answer 4

अपना वांछित परिणाम प्राप्त करने के लिए नीचे जैसा कुछ प्रयास करें

input {
    max-width: 100%;
}

Answer 5

बूटस्ट्रैप> 4.1 के साथ यह फ्लेक्सबॉक्स उपयोगिता वर्गों का उपयोग करने का सिर्फ एक मामला है। बस अपने कॉलम के अंदर एक फ्लेक्सबॉक्स कंटेनर रखें, और फिर उसके भीतर सभी तत्वों को "फ्लेक्स-फिल" वर्ग दें। इनलाइन फॉर्म के साथ आपको तत्वों पर मार्जिन / पैडिंग सेट करने की आवश्यकता होगी।

.prop-label {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-12">
		<div class="d-flex">
			<label class="flex-fill prop-label">Label:</label>
			<input type="text" class="flex-fill form-control prop-field">
		</div>
	</div>
</div>