Bootstrap。預先和附加輸入。如何最大化輸入字段寬度？

Question

我正在使用Twitter的Bootstrap。我想要的是製作一個前置文本，輸入字段和一個按鈕，但我希​​望我的輸入字段具有最大可用寬度，以便提交按鈕的右邊緣靠近井的右邊緣。自舉文檔中有。輸入塊級類，它允許任何元素或元素的行爲類似於塊級元素，但將其應用於輸入會導致中心輸入的大小。 http://jsfiddle.net/Uc4CE/

<div class="well"> 
<div class="input-prepend input-append"> 
    <span class="add-on">Some text</span> 
    <input class="input" type="text" name="xxx" value="xxx" /> 
    <input type="hidden" name="next" value="xxx" /> 
    <input type="submit" value="xx" class="btn btn-info" /> 
</div> 
</div> 

Answer 1

我一直在尋找類似的東西，並從https://gist.github.com/mattjorn/5020957該解決方案爲我 - 將.input-block-level添加到您的外部div，例如

<div class="input-prepend input-append input-block-level">

，然後延伸自舉CSS這樣的：

.input-prepend.input-block-level { 
    display: table; 
    width: 100%; 
} 

.input-prepend.input-block-level .add-on { 
    display: table-cell; 
    background-color: white; 
} 

.input-prepend.input-block-level > input { 
    box-sizing: border-box; 
    height: 30px; 
    display: table-cell; 
    width: 100%; 
    border-left-style: none; 
} 

Answer 2

可能是使用了div class="input-prepend input-append"額外風格margin-right

結果爲您的代碼：

<div class="well"> 
    <div class="input-prepend input-append" style="margin-right: 108px;"> 
     <span class="add-on">Some text</span> 
     <input class="input-block-level" type="text" name="xxx" value="xxx" /> 
     <input type="hidden" name="next" value="xxx" /> 
     <input type="submit" value="xx" class="btn btn-info" /> 
    </div> 
</div> 

http://jsfiddle.net/Uc4CE/1/

Answer 3

有一個在3.0分支Twitter的引導的按@mdo's comment on this issue此修復。

但是，在我輸出django-crispy forms佈局在<div class="span4">內的同時，我在我的項目中使用了以下javascript。這說明了響應式設計。

---

例如HTML

<div class="row-fluid"> 
    <div class="span4"> 
     {% crispy form %} 
    </div> 
</div> 

---

的style.css

/* I also set this to account for smaller widtsh */ 

form fieldset { 
    width:100% 
} 

---

fix.js

注：我也觸發此窗口resizings以及。

功能sizeInputs（）{
變種FW = $（ '形式字段集'）innerWidth（）; （'.input-prepend'）。each（function（）{（this）.children（'input'）。css（'width'，fw - $（this）.children（'。add -on'）。innerWidth（））;}）; };

$（document）.ready（function（）{sizeInputs（）;}）;

$（窗口）。resize（function（）{sizeInputs（）;}）;

Answer 4

編輯：請注意，這個答案適用於Bootstrap v2.3.x. Bootstrap 3已經在本地解決了這個問題（see doc）。

由李某的回答啓發，這是我還挺改進方案（包括追加和前插，最小可能的附加寬度，去掉不必要的風格，汽車高度......）。後引導CSS /減檔包含此：

.input-append.input-block-level, 
.input-prepend.input-block-level { 
    display: table; 
} 

.input-append.input-block-level .add-on, 
.input-prepend.input-block-level .add-on { 
    display: table-cell; 
    width: 1%; /* remove this if you want default bootstrap button width */ 
} 

.input-append.input-block-level > input, 
.input-prepend.input-block-level > input { 
    box-sizing: border-box; /* use bootstrap mixin or include vendor variants */ 
    -moz-box-sizing: border-box; /* for Firefox */ 
    display: table; /* table-cell is not working well in Chrome for small widths */ 
    min-height: inherit; 
    width: 100%; 
} 

.input-append.input-block-level > input { 
    border-right: 0; 
} 

.input-prepend.input-block-level > input { 
    border-left: 0; 
} 

使用它像這樣在你的HTML記住，你必須使用a標籤沒有button在這種情況下，你的按鈕：

<div class="input-append input-block-level"> 
    <input type="text" /> 
    <a class="btn add-on">click</a> 
</div> 

編輯：在IE8中，如果您在.input-append.input-block-level > input中設置display: table，則儘管採取了焦點，輸入標記也會變得不可編輯。

完全忽略此display:參數使其在IE8以及當前的Chrome/Safari/Firefox中按預期工作。