引導輸入3組100％的寬度

在引導文件，他們有跨越100％的寬度，沒有額外的標記輸入組：http://getbootstrap.com/components/#input-groups 引導輸入3組100％的寬度

<div class="input-group"> 
    <input type="text" class="form-control"> 
    <span class="input-group-addon">.00</span> 
</div>

我似乎無法讓我的輸入組跨越100％，而沒有明確定義width: 100%的input-group。請注意，我稍微調整了標記：

<div class="input-group"> 
    <input class="form-control" placeholder="Auto width" /> 
    <div class="clear"> 
     <a href="#" class="glyphicon glyphicon-remove"></a> 
    </div> 
</div>

CSS：

.clear { display: table-cell; }

我創建了一個小提琴來表示這個問題：http://jsfiddle.net/Wexcode/B9LMN/

來源

2014-05-02 Wex

添加width: 1%到輸入元素的兄弟姐妹修復此問題：

.clear { width: 1%; display: table-cell; }

見http://jsfiddle.net/Wexcode/B9LMN/2/

來源

2014-05-02 20:46:59 Wex

+18

什麼樣的巫術是這樣的！ – by0

這個答案沒有解釋爲什麼它解決了這個問題。 – Arashsoft

heck yeah！謝謝！：D –

<div class="container"> 
<h3>Form widths</h3> 

<form role="form"> 
    <div class="form-group"> 
    <label>Auto width</label> 

    <div class="input-group"> 
     <input class="form-control" placeholder="Auto width" /> <span class= 
     "input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label>100% width</label> 

    <div class="input-group" style="width: 100%"> 
     <input class="form-control" placeholder="100% width" /> <span class= 
     "input-group-addon"><a href="#" class="glyphicon glyphicon-remove"></a></span> 
    </div> 
    </div> 
</form> 
</div>

來源

2014-05-02 21:26:34 padas

謝謝，但我不想應用'input-group-addon'樣式。 – Wex

input-group有display: table CSS屬性，而<input class="form-control"有display: table-cell CSS屬性。

<div class="input-group"> <!-- this is display: table --> 
    <input type="text" class="form-control"> <!-- this is display: table-cell --> 
    <span class="input-group-addon">.00</span> <!-- this is display: table-cell --> 
</div>

據HERE，在「重要提示樣式規則表」，

Width works on table cells just about how you would think it does, except when there is 
some kind of conflict. For instance if you tell the table itself to be 400px wide then the 
first cell of a three-cell row to be 100px wide and leave the others alone, that first cell 
will be 100px wide and the other two will split up the remaining space.

它解釋說，如果有table-cell子元素的width定義（比方說width: 100px），那麼下一個子元素table-cell屬性雖然沒有定義，但是會填充剩下的空間。得到一個input-group拉伸到全寬

來源

2014-05-02 23:14:01 raunay

非常好的解釋，謝謝。我們是否有專門解決此問題的引導課程？ –

的一種方式，似乎給了它input-group-addon 100％的寬度之一：

<div class="input-group" style="width:100%;"> 
    <span class="one input-group-addon">one</span> 
    <span class="two input-group-addon">two</span> 
    <span class="tre input-group-addon" style="width:100%">tre</span> <!-- here --> 
    <span class="for input-group-addon">for</span> 
    <span class="fiv input-group-addon">fiv</span> 
    <span class="input-group-btn"> 
    <button class="btn" type="button">x</button> 
    </span> 
</div>

來源

2015-06-20 01:51:18 yPhil

如果你有選擇2爲你的「輸入組」的一部分，你用「解析」參數更好地創建它：

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });   
});

來源

2016-02-17 23:38:42

引導輸入3組100％的寬度

回答

相關問題