全宽输入追加搜索按钮

如何使搜索表单的全宽像下面的按钮一样？全宽输入追加搜索按钮

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

全宽输入追加搜索按钮

回答

相关问题