Css 引导组水平输入

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

第一：
第二：
...

问题在于输入之间存在空白：

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

更新：

---

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

您可以定义包含按钮的其他输入和范围的宽度，如下所示：

<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;" />
            <input type="text" class="form-control" value="test2" style="width:150px;" disabled /> 
            <span class="input-group-btn" style="width:50px;">
                <button class="btn btn-primary" type="button">...</button>
            </span>
        </div>
    </div>
<form>

第一：
第二：
...

更新： 不需要固定宽度的解决方案

---

只需将其添加到css文件中即可

.input-group-btn {
width:0;

}

这个工作

试试这个

<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;
}

...
.表格包装{
文本对齐：居中；
填充：20px；
}
.表格内联{
高度：34px；
}
.form inline.form控件{
宽度：100%；
}
.form inline.form组{
页边距底部：0；
浮动：左；
}
.表单内联.固定宽度组{
宽度：100px；
边界半径：4px 0 0 4px；
.表格内联.流体宽度组{
宽度：计算（100%-200px）；
边界半径：0；
}
.表单内联.固定宽度输入{
边界半径：4px 0 0 4px；
}
.表单内联.流体宽度输入{
边界半径：0；
}
.我的btn{
文本转换：大写；
身高：100%；
边界半径：0 4px 4px 0；
背景色：#35bfd1；
浮动：对；
颜色：#fff；
填充：5px15px；
宽度：100px；
}
.我的btn:悬停{
颜色：#fff；
背景色：#31b0d5；
}
.流体宽度输入{
边界半径：0；
}

再看看这个答案，也许你会发现它很有用：

---

我不希望第二个输入的值“test2”为固定宽度。但是第一个输入和按钮的宽度为固定宽度。好的，那么这可能是有用的：Ref:JSFiddle tanx，我尝试过，但我无法使用input-group-field.tanx为我的代码修复它，但它使值为“test2”的输入为固定宽度。tnx，但我不希望表单是内联的！我有多行表单。@美杜莎，为什么你说表单是内联的，你的意思是显示：内联，因为它不是。我在一个复杂表单中有多个表单组（两个输入并并排按钮）。我的意思是不在一行中！@美杜莎看这个，是同一个想法，我只是添加了更多表单组，并放入了一个包装器（内容行），如果这不是你想要的，请放一张你想要的图片，我会尽力帮你我想要的！非常感谢你的帮助！

<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;
}