将Bootstrap输入框水平排列

Question

将Bootstrap输入框水平排列

3

我有一个多行表单，其中一行我想使用Bootstrap水平分组两个输入框和一个按钮。以下是JSFIDDLE链接：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>

问题是在输入框之间存在空白： enter image description here

如何使输入框和按钮并排对齐且没有空格？

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

- medusa

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- qopa · Answer 1

您可以在包含按钮的输入框和 span 中定义宽度，如下所示：

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

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

input-group-field

input-group-field 的 Jsfiddle 示例

- Kesavan R · Answer 2

只需在你的 CSS 文件中添加这个

.input-group-btn {
width:0;

}

这个工作的JSFIDDLE

- Yandy_Viera · Answer 3

试一下这个

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

这里有一个 jsfiddle 的例子可以玩一下。

另外看看这个答案，也许你会觉得它很有用：

https://dev59.com/YYzda4cB1Zd3GeqPgwBJ#30856980