爲什麼input-append類會打破流體網格中輸入的寬度？

我有以下HTML：爲什麼input-append類會打破流體網格中輸入的寬度？

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span8"> 
     <form class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label">Field 1</label> 
      <div class="controls"> 
       <input type="text" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label">Field 2</label> 
      <div class="controls"> 
       <div class="input-append"> 
       <input type="text" /> 
        <span class="add-on">%</span> 
       </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div>

和以下式：

輸入{ 寬度：100％; }

Field 1的輸入框按預期工作。然而，場2似乎得到了一些固定的寬度。爲什麼會發生這種情況，是否有解決問題的方法？我想追加輸入是在該跨度內相同的100％寬度以匹配其他文本字段。

這裏舉例：http://jsfiddle.net/PilotBob/erT7d/

來源

2012-11-08 PilotBob

這將是bootstrap css。 –

這是因爲你有另一個容器，比你想象的要小。 100％僅指最近的祖先。 –

100％應該指最近的具有特定寬度的祖先嗎？你是說input-append的寬度設置了嗎？ – PilotBob

這是因爲在第二輸入，你有另一個容器，.input-append，這是比你想象的要小。

將其設置爲width:100%;爲好，solved this problem.

來源

2012-11-08 18:17:43

啊謝謝。可以發誓我嘗試過。我敢打賭，我忘了。在風格。 – PilotBob

不好的東西，附加的在span8網格之外。無論如何，它是在網格中？ – PilotBob

這可能會更復雜一些，但這是可能的。等一下。 –

這是因爲自舉改變它具有classinput-append從block到inline-block的div的默認display值。

您可以設置width:100%的輸入寬度與正常相同，但add-on會溢出或將其設置爲width:95%爲相同。

First solution with width:100%

Second solution with width:95%

來源

2012-11-08 18:19:34 Sotiris

謝謝...這95％並不能真正起作用，因爲當你調整容器的尺寸時，寬度差是不變的。 – PilotBob

我已經保存了該文件，並運行它。沒有發現問題

<style> 
input{width: 100%;} 
</style> 
<div class="container-fluid"> 
<div class="row-fluid"> 
<div class="span8"> 
    <form class="form-horizontal"> 
     <div class="control-group"> 
      <label class="control-label">Field 1</label> 
     <div class="controls"> 
      <input type="text" /> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label">Field 2</label> 
     <div class="controls"> 
      <div class="input-append"> 
      <input type="text" /> 
       <span class="add-on">%</span> 
      </div> 
      </div> 
     </div> 
    </form> 
    </div> 
</div>

但在你提到的網址，它不工作，我不知道爲什麼？如果別的地方它正在創建的問題可能有一些原因

不足容器寬度，省去家長或容器寬度就能解決問題
你可能有後來的CSS覆蓋寬度，用「輸入{width：100％！importtant;}「

來源

2012-11-08 18:28:13 fkabeer

爲什麼input-append類會打破流體網格中輸入的寬度？

回答

相關問題