Twitter的自舉輸入字段的最大寬度

Question

我有以下設置使用最新的Twitter的引導框架：

http://jsfiddle.net/hfexR/2/

我現在想的是，輸入字段取最大寬度時，旁邊有沒有按鈕至。

我該如何用純css或twitter-bootstrap本身來做到這一點？

喜歡的東西inline-block的應該去，我只是不想在此刻得到它...

Answer 1

編輯：自引導V3，類已經進化所以使用COL-XX-X類以獲得結果說明如下（進一步的變化可能是必要的）

---

Live demo (jsfiddle)

你可以使用一個.row-fluid和使用.spanX，使輸入填補其容器：

<form class="form-search"> 
    <div class="row-fluid"> 
     <input type="text" class="input-medium search-query span12"> 
    </div> 
</form> 
<form class="form-search"> 
    <div class="row-fluid"> 
     <input type="text" class="input-medium search-query span8"> 
     <button type="submit" class="btn span4">Cancel</button> 
    </div> 
</form> 

看來，是需要按鈕/輸入組合有點修復：

/* May not be the best way, not sure if BS has a better solution */ 
/* Fix for combining input and button spans in a row */ 
.row-fluid > input + button[class*="span"] { 
    float: none;   /* Remove the */ 
    display: inline-block; /* floating */ 
    margin-left: 0;  /* Stick it to the left */ 
} 

最後一件事，你不應該結合.spanX和.well因爲padding和邊界和其他的東西，在這裏是an example of why (jsfiddle)。

Answer 2

您可以使用TE類輸入的塊級就像這個fiddle

<div class="container"> 
    <div class="span4 well"> 
    <form class="form-search"> 
     <input type="text" class="input-block-level search-query"> 
    </form> 
    <form class="form-search"> 
     <input type="text" class="input-medium search-query"> 
     <button type="submit" class="btn">Cancel</button> 
    </form> 
    </div> 
</div>