Twitter引導 - 預置的輸入元素重疊時，彼此相鄰

Question

我想把兩個輸入元素彼此相鄰，與第一個輸入前面的項目，使用顯示：表格樣式。但是，這導致第二個輸入元素與第一個輸入元素重疊。我試過使用框大小：沒有運氣的邊框。看起來問題是，我限制了父div的寬度，然後將輸入元素的寬度設置爲100％，以便填充父項，但這根本不起作用。這裏是一個的jsfiddle例如：

HTML

<div class="container"> 
    <div class="row"> 
     <div class="cell input-prepend"> 
      <span class="add-on">HI</span> 
      <input type="text" /> 
     </div> 
     <div class="cell"> 
      <input type="number"/> 
     </div> 
    </div> 
</div> 

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.row { 
    display: table-row; 
    width: 100px; 
} 

input[type=text] { 
    width: 100%; 
} 

.cell { 
    display: table-cell; 
} 

http://jsfiddle.net/5pgPY/7/

的目標是讓上面一堆像行的在文本輸入的每個實例有一些標籤可能不是相同的寬度，所以我需要一些方法來確保文本輸入全部排隊。也許我應該放棄使用prepended元素併爲此使用單獨的div？

Answer 1

沒有看到問題來自哪裏。不管怎麼說，這爲我工作：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.container { 
    margin-top: 10px; 
} 

.row { 
    display: table-row; 
    width: 200px; 
} 

input[type=text] { 
    width: 100%; 
} 

.cell { 
    margin-right: 60px; 
    float: left; 
} 

Answer 2

在你的榜樣，你還沒有使用的輸入，前置級的第二輸入，你應該從輸入如下

<div class="cell input-prepend"> 
     <input type="number"/> 
    </div> 

而且在CSS刪除寬度= 100％寫和使用保證金右

input[type=text] { 
     margin-right:10px; 

     } 

能否請您檢查JSfidlle updated JSfiddle prepend

<div class="container"> 
<div class="row"> 
    <form class="form-inline"> 
     <input type="text" class="input-small" placeholder="Email"> 
     <input type="password" class="input-small" placeholder="Password"> 
    </form> 
    <form class="form-inline"> 
     <input type="text" class="input-small" placeholder="Email"> 
     <input type="password" class="input-small" placeholder="Password"> 
    </form> 
</div> 
</div>