引導按鈕對齊形式內嵌

當屏幕縮小爲小尺寸時，內嵌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類的font-size = 14px時，按鈕的對齊似乎是正確的。

我正在尋找一種更好的方式，我可以克服這種對齊問題，並且可以將窗體控件類應用於文本框，以保持所有引導樣式。

來源

2016-04-14 koolhuman

您可以嘗試flexbox – Franky238

我認爲您將不得不使用解決方法。直接從Bootstrap的網站 - http://getbootstrap.com/css/#forms-inline - 將添加.form-inline添加到您的表單（不一定是

還有一個類似的問題在這裏 - http://stackoverflow.com/questions/21651215/how-make-bootstrap-class-form-inline-work-on-resolutions-768px – Tricky12

只是簡單地覆蓋或更改自己的CSS按鈕樣式屬性垂直對齊。將其從vertical-align：middle更改爲「vertical-align：top」...應該修復它。

.btn { vertical-align: top; }

來源

2016-04-14 18:59:08 Brian

是的，我當然可以做到這一點，但爲什麼垂直對齊：中間不能在小屏幕上工作嗎？我們可以做到這一點，而不會覆蓋任何默認引導類？ – koolhuman

現在我會接受這個答案，除非我們找到更好的方法來做到這一點。謝謝！！ – koolhuman

老實說，Bootstrap並非沒有缺點。我同意那裏「應該」是一個更好的解決方案。希望有人能夠在這個問題上發現更多的亮點。 – Brian

引導按鈕對齊形式內嵌

回答

相關問題