如何让Bootstrap行内的input元素尺寸一致（宽度相等）

你出现输入框尺寸不一致的核心原因是列宽比例不统一、表单元素类配置不对，按下面几步改就能解决：

• 第一步：调整HTML的列配置
  把原来行内两个列的宽度类统一，两列布局就都设为各占一半，修改后的HTML代码如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-4">
  <div class="card pl-2 py-2">
    <div class="card-block">
      <div class="row pl-2">
        <div class="col-xs-6" id="id_R1_C1"></div>
        <div class="col-xs-6" id="id_R1_C2"></div>
      </div>
    </div>
  </div>
</div>

• 第二步：统一JS里表单元素的类配置

1. 修改下拉框的类名，替换createSingleSelectBox函数里的类赋值语句：
   把selectBox.className = "input-small w-50";改为selectBox.className = "form-control";
2. 修改数字输入框的传入类名，找到调用createInputNumberBox的代码，把传入的类参数替换：
   把"input-xs w-50 h-50"改为"form-control"
   修改后的对应JS代码段如下：

/* create single select box */
function createSingleSelectBox(id, header_arr) {
  var selectBox = document.createElement("select");
  selectBox.setAttribute("id", id);
  selectBox.multiple = false;
  selectBox.className = "form-control";

  for (var i = 0; i < header_arr.length; i++) {
    var op = new Option();
    op.value = header_arr[i];
    op.text = header_arr[i];
    selectBox.options.add(op);
  }
  return selectBox;
}

// 调用输入框部分的代码
var inputNumBox = createInputNumberBox(
  "id_R1_C2_input",
  1,
  1,
  "number",
  "form-control",
  "2"
);

• 改动说明
  • col-xs-6让两个列在所有屏幕尺寸下都各占行宽的50%，保证父容器宽度一致
  • form-control是Bootstrap3内置的表单标准类，会自动统一所有表单元素的宽度、高度、边框、边距样式，不需要额外加宽度类就能自动占满父容器

内容的提问来源于stack exchange，提问作者Wasim Aftab