如何在 bootstrap 行中使输入元素大小对称（宽度相等）

Question

我正在尝试在两列中创建多个输入框。但是，我无法使每个 bootstrap 行中的框大小相等。因为我不是 Web 开发人员，所以非常感谢任何有关如何解决此问题的建议！

可以从此 link

访问可重现的示例

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

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

/* create input number box */
function createInputNumberBox(id, min, step, type, my_class, default_val) {
  var inputNumBox = document.createElement("input");
  inputNumBox.id = id;
  inputNumBox.className = my_class;
  inputNumBox.type = type;
  inputNumBox.step = step;
  inputNumBox.min = min;
  inputNumBox.value = default_val;
  return inputNumBox;
}

/* create heading with icon*/
function createHeadingWithIcon(
  head_type,
  head_text,
  icon_id,
  bottom_margin_px
) {
  var h = document.createElement(head_type);
  h.innerHTML =
    head_text +
    " " +
    "<i class='far fa-question-circle' " +
    icon_id +
    " style='color:grey'></i>";
  // <i class="far fa-question-circle" id="go_tooltip" style="color:grey"></i>
  h.style.marginBottom = bottom_margin_px;
  return h;
}

//#######################################################################################################################

var h4 = createHeadingWithIcon("h6", "R1_C1", "id='exclusive_tooltip'", "5px");
document.getElementById("id_R1_C1").appendChild(h4);
var exclusive_all = ["YES", "NO"];
var single_selectbox = createSingleSelectBox("R1_C1_select", exclusive_all);
document.getElementById("id_R1_C1").appendChild(single_selectbox);

var h4 = createHeadingWithIcon("h6", "R1_C2", "id='k_out_N_tooltip'", "5px");
document.getElementById("id_R1_C2").appendChild(h4);
var inputNumBox = createInputNumberBox(
  "id_R1_C2_input",
  1,
  1,
  "number",
  "input-xs w-50 h-50",
  "2"
);
document.getElementById("id_R1_C2").appendChild(inputNumBox);

<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-md-7" id="id_R1_C1"></div>
        <div class="col-md-5" id="id_R1_C2"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

这里有两个明显的问题：

您已链接到 Bootstrap v3.3.5, but you're using Bootstrap v5 classes。特别是，w-50 class 在 v3 中不可用。
您指定输入的宽度应为 parent 的 50%。但是 parent 是不同的宽度 - 一个是七列 (~58% 的容器)，另一个是五列 (~42%容器）.

如果您能够更新到 Bootstrap v5，那么您可以通过以下方式使您的输入大小相同：

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

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

/* create input number box */
function createInputNumberBox(id, min, step, type, my_class, default_val) {
  var inputNumBox = document.createElement("input");
  inputNumBox.id = id;
  inputNumBox.className = my_class;
  inputNumBox.type = type;
  inputNumBox.step = step;
  inputNumBox.min = min;
  inputNumBox.value = default_val;
  return inputNumBox;
}

/* create heading with icon*/
function createHeadingWithIcon(
  head_type,
  head_text,
  icon_id,
  bottom_margin_px
) {
  var h = document.createElement(head_type);
  h.innerHTML =
    head_text +
    " " +
    "<i class='far fa-question-circle' " +
    icon_id +
    " style='color:grey'></i>";
  // <i class="far fa-question-circle" id="go_tooltip" style="color:grey"></i>
  h.style.marginBottom = bottom_margin_px;
  return h;
}

//#######################################################################################################################

var h4 = createHeadingWithIcon("h6", "R1_C1", "id='exclusive_tooltip'", "5px");
document.getElementById("id_R1_C1").appendChild(h4);
var exclusive_all = ["YES", "NO"];
var single_selectbox = createSingleSelectBox("R1_C1_select", exclusive_all);
document.getElementById("id_R1_C1").appendChild(single_selectbox);

var h4 = createHeadingWithIcon("h6", "R1_C2", "id='k_out_N_tooltip'", "5px");
document.getElementById("id_R1_C2").appendChild(h4);
var inputNumBox = createInputNumberBox(
  "id_R1_C2_input",
  1,
  1,
  "number",
  "input-xs w-50 h-50",
  "2"
);
document.getElementById("id_R1_C2").appendChild(inputNumBox);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/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-md-6" id="id_R1_C1"></div>
        <div class="col-md-6" id="id_R1_C2"></div>
      </div>
    </div>
  </div>
</div>

注意： v3 和 v5 之间有很多变化。如果您使用的是现有网站，更改 Bootstrap 版本可不是一件容易的事。

如何在 bootstrap 行中使输入元素大小对称（宽度相等）

how to make input elements symmetric size (equal width) in a bootstrap row

html

bootstrap-4