我有一个多行表单，在其中一行中，我想使用 Bootstrap 将两个输入和一个按钮水平分组。 JSFIDDLE

<form> 
<div class="form-group"> 
    <lable>first :</lable> 
    <div class="input-group"> 
        <input type="text" class="form-control" value="123" style="width:50px;"/> <span class="input-group-btn" 
                                                                                        style="width:0px;"></span> 
 
        <input type="text" class="form-control" value="test2" disabled/> 
    </div> 
</div> 
<div class="form-group"> 
    <lable>second :</lable> 
    <div class="input-group"> 
        <input type="text" class="form-control" value="123" style="width:50px;"/> <span class="input-group-btn" 
                                                                                        style="width:0px;"></span> 
 
        <input type="text" class="form-control" value="test2" disabled/> <span class="input-group-btn"> 
    <button class="btn btn-primary" type="button">...</button> 
</span> 
 
    </div> 
</div> 

问题是输入之间的空白:

如何在没有空格的情况下并排对齐输入和按钮？

更新: 我不希望具有“test2”值的第二个输入为固定宽度。但第一个输入和按钮具有固定宽度。

请您参考如下方法:

试试这个

<div class="form-wrapper"> 
    <form class="form-inline" role="form"> 
        <div class="form-group  fixed-width-group"> 
            <input type="email" class="form-control fixed-width-input" id="ejemplo_email_2" placeholder="123"> 
        </div> 
        <div class="form-group  fluid-width-group"> 
            <input type="password" class="form-control fluid-width-input" id="ejemplo_password_2" placeholder="Test2"> 
        </div> 
       <button type="submit" class="btn my-btn">...</button> 
    </form> 
</div> 
 
.form-wrapper { 
    text-align: center; 
    padding: 20px; 
} 
.form-inline { 
    height: 34px; 
} 
.form-inline .form-control { 
    width: 100%; 
} 
.form-inline .form-group { 
    margin-bottom: 0; 
    float: left; 
} 
.form-inline .fixed-width-group { 
    width: 100px; 
    border-radius: 4px 0 0 4px; 
 
.form-inline .fluid-width-group { 
    width: calc(100% - 200px); 
    border-radius: 0; 
} 
.form-inline .fixed-width-input { 
    border-radius: 4px 0 0 4px; 
 } 
.form-inline .fluid-width-input { 
    border-radius: 0; 
} 
.my-btn { 
    text-transform: uppercase; 
    height: 100%; 
    border-radius: 0 4px 4px 0; 
    background-color: #35bfd1; 
    float: right; 
    color: #fff; 
    padding: 5px 15px; 
    width: 100px; 
} 
.my-btn:hover { 
    color: #fff; 
    background-color: #31b0d5; 
} 
.fluid-width-input { 
    border-radius: 0; 
} 

There is a jsfiddle example to play wiht .

再看看这个答案，也许你觉得有用:

https://stackoverflow.com/questions/30854719/achieving-horizontal-inline-form-for-signup-in-bootstrap/30856980#30856980