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>