全寬輸入追加搜索按鈕

如何使搜索表單的全寬像下面的按鈕一樣？全寬輸入追加搜索按鈕

Example

<form class="form-search"> 
    <div class="input-append"> 
    <input type="text" class="input-small search-query"> 
    <button type="submit" class="btn">Search</button> 
    </div> 
</form>

來源

2012-12-11 maletor

你能告訴我們你現在正在使用的CSS？ – JSW189

沒有css。使用twitter bootstrap的默認樣式2.2.2。 – maletor

完成

http://jsfiddle.net/MgcDU/6033/

從這裏使用方法：

http://boulderinformationservices.wordpress.com/2011/02/02/input-field-and-submit-button-on-the-same-line-full-width/

<div class="container"> 
    <div class="row"> 
     <div style="width:100%;background-color:#d0d0d0;text-align:center;">Example of a Full row</div> 
    </div> 
    <div class="row"> 
     <div class="span12 pull-right"> 
      <form class="form-inline"> 
       <button type="submit" class="btn" style="float:right;">Button</button> 
       <div style="overflow: hidden; padding-right: .3em;"> 
        <input style="height:1.6em;width:100%" type="text" placeholder="full width minus button width" /> 
       </div> 
      </form> 
     </div> 
    </div> 
</div>

來源

2013-04-07 00:23:48

實際上我沒有看到任何全長輸入！ – Bertuz

感謝您指出Bertuz，原始的cdns有不匹配的版本，新版本不知道如何在單獨的div上給出右移100％的寬度。我已解決這兩個問題。 –

對不起，但這不是問題的解決方案！該按鈕的左側有圓角邊緣，但我們需要一個直角左側與硬角，... 請參閱 http://stackoverflow.com/questions/11188964/fluid-input-append-in-bootstrap-響應式或 https://github.com/twbs/bootstrap/issues/6414 – aronadaal

充分利用。輸入，追加有一個特定的寬度，然後給你.search查詢的100％的寬度和你.btn的100％

寬度這是最好我們可以沒有更多的細節 - 比如控制這個的CSS或者你在頁面上做的一個例子。

來源

2012-12-11 23:16:35 ntgCleaner

全寬輸入追加搜索按鈕

回答

相關問題