如何让两个input类控件在同一行对齐并保留指定间距

DevOps 小满

2026-9-24

问题根源

你用到的Bootstrap内置.form-control类默认是100%宽度的块级元素，会独占当前父容器的整行宽度，因此后面的按钮会被挤到下一行，无法和输入框对齐。

方案1：使用Bootstrap自带输入框组组件（无需额外写CSS）

直接用Bootstrap内置的input-group组件包裹两个控件即可，框架会自动处理对齐和间距：

<div class="form-group">
    <div class="row">
        <label  for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label>
        <div id="box" class="col-sm-8 col-xs-8">
            <div class="input-group">
                <input type="text" class="form-control" name="workphoneNumber" placeholder="enter">
                <span class="input-group-btn">
                    <input type="button" class="btn btn-success" value="add" onclick="add_textbox()">
                </span>
            </div>
        </div>
    </div>
</div>

方案2：使用Flex布局自定义间距

如果需要自由调整两个控件之间的间隔大小，可以用Flex布局实现，额外增加少量CSS即可：

新增CSS样式：

/* 自定义样式 */
#box {
  display: flex;
  align-items: center;
  gap: 10px; /* 这里的数值可以任意调整，控制两个控件的间距 */
}
#box .form-control {
  flex: 1;
  width: auto; /* 覆盖form-control默认的100%宽度 */
}