Bootstrap input-append在流體網格上不起作用

Question

我正在嘗試使用input-append作爲流體行內的搜索輸入，但不幸的是，它似乎無法正常工作，因爲它沒有縮放到容器的全部寬度。

這是我的示例的一段代碼：

<div class="container"> 
<div class="row-fluid"> 
<div class="span12"> 


    <div class="input-append"> 
    <input class="span12" id="appendedInputButton" type="text"> 
    <button class="btn" type="button">Go!</button> 
    </div> 

</div> 
</div> 
</div> 

但輸入不結垢的span12整個寬度。有誰知道爲什麼會發生這種情況，或者我錯過了什麼？

Answer 1

這裏是一個的jsfiddle：http://jsfiddle.net/persianturtle/SXcV3/

#appendedInputButton { 
    width:100%; 
} 

我也建議你使用span12類包含輸入的股利，而不是在輸入本身。

更新：自引導添加一些填充到他們的按鈕出於美學原因，我做了輸入按鈕寬度95％，這看起來更好，沒有水平滾動條。

更新的jsfiddle：http://jsfiddle.net/persianturtle/SXcV3/1/

Answer 2

有必要.row-fluid和.span12股利。正確的標記是

<div class="container"> 


    <div class="input-append"> 
    <input class="span12" id="appendedInputButton" type="text"> 
    <button class="btn" type="button">Go!</button> 
    </div> 

</div> 

Working fiddle

Answer 3

我通常會嘗試通過採用邊界箱箱規模模型來解決引導的流動性問題。像這樣的事情最近爲我工作：

.input-append{ 
    width: 100%; 
} 

.input-append input[type="text"]{ 
    width: 90% !important; 
} 

.input-append button{ 
    width: 10%; 
} 

.input-append input[type="text"], 
.input-append button{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
} 

很明顯，你會希望把這個所有形式的範圍之內，但你的想法。

Answer 4

的按鈕固定寬度，你可以使用不同的技術

.controls { 
    position: relative; 
} 

.input-append{ 
    width: 100%; 
} 

.input-append input[type="text"]{ 
    position: absolute; 
    width: auto !important; 
    margin-right: 42px; 
    left: 0px; 
    right: 0px; 
} 

.input-append button{ 
    width: 42px; 
    float: right; 
    margin: 0px !important; 
    padding: 0px !important; 
} 

.input-append input[type="text"], 
.input-append button{ 
    height: 42px; 
    -webkit-box-sizing: padding-box; 
    -moz-box-sizing: padding-box; 
    -ms-box-sizing: padding-box; 
    box-sizing: padding-box; 
}