स्क्रीन के छोटे आकार में कम होने पर फॉर्म-इनलाइन div के अंदर बटन संरेखण बंद हो जाता है। मैंने फिडल नीचे बनाया है
पहेली - https://jsfiddle.net/koolhuman/a4zdoodu/2/
//section 1
<div class="form-inline">
<label>Enter Zip/Postal Code:</label>
<input type="text" class="form-control" value="" id="localMarketPostalCode" name="localMarketPostalCode" size="5">
<input type="button" id="searchButton" value="Search" class="btn btn-success">
</div>
<br/>
//section2
<div class="form-inline">
<label>Search</label>
<input type="text" id="search" name="search" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn btn-success">Search</button>
</div>
1) पहला भाग वह है जहाँ समस्या निहित है और पाठ बॉक्स पर लागू प्रपत्र-नियंत्रण वर्ग है
2) दूसरे खंड में संरेखण सही है और प्रपत्र-नियंत्रण वर्ग पाठ बॉक्स पर लागू नहीं होता है
संभावित कारण: मुझे लगा कि इस मुद्दे के साथ हैप्रपत्र-नियंत्रण वर्ग जो मैंने फ़ॉन्ट-आकार के संयोजन में टेक्स्टबॉक्स पर लागू किया है। जब मैं .form-control वर्ग के लिए फ़ॉन्ट-आकार = 14px हटाता हूं, तो बटन का संरेखण सही लगता है।
मैं एक बेहतर तरीके की तलाश कर रहा था जहाँ मैं इस संरेखण मुद्दे पर काबू पा सकूँ और साथ ही फॉर्म-कंट्रोल क्लास को टेक्स्टबॉक्स पर लागू कर सकूँ ताकि सभी बूटस्ट्रैप स्टाइल बनाए रहे।
उत्तर:
जवाब के लिए 0 № 1बस अपने स्वयं के सीएसएस में बटन शैली की संपत्ति को ऊर्ध्वाधर-संरेखित करें या ओवरराइट करें। इसे वर्टिकल-अलाइन से बदलें: मध्य से "वर्टिकल-अलाइन: टॉप" ... जो इसे ठीक करना चाहिए।
.btn { vertical-align: top; }