Bootstrap 具有多个输入的行的样式引导

e1xvtsh3  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(1)|浏览(116)

我正在寻找输入/援助,你会如何使用 Bootstrap 5的风格。
我创建了一个codepen:https://codepen.io/korazy/pen/xxmWGOx
议题:
1.我有一行文字,我的 Package , Bootstrap 现在要改变输入高度为行的全高。我希望输入保持适当的高度。
1.我在两个输入之间有“to”这个词,这样用户就可以输入一个值的范围。我正在寻找一个适当的方式来调整东西都垂直和水平。
1.我有一个选择,当“等于”被选中时,只显示第一个输入。当选择“between”时,它显示两个输入以输入值范围。正在寻找有关如何构造此方案的html的输入。
代码:

$(document).ready(function() {
  $("#operator").on("change", function() {
    onOperatorChange($(this));
  });
});

function onOperatorChange(e) {
  const sb = e.closest("div.row").find("#show_b");
  if (e.val() == "e") {
    sb.addClass("visually-hidden");
  } else {
    sb.removeClass("visually-hidden");
  }
}
0kjbasz6

0kjbasz61#

我改了一点html

<div class="col-6 d-flex align-items-center fixed-height-input">
  <input id="value" type="text" class="form-control" value="123" maxlength=5 style="max-width:100px;"/>
  <div class="d-flex align-items-center gap-2 ms-1" id="show_b">
    to
  <input id="value_to" type="text" class="form-control fixed-height-input" value="456" maxlength=5 style="max-width:100px;"/>
  </div>
</div>

你可以在这里查看我的版本:
https://codepen.io/uafrontender/pen/rNodVmE
不清楚你在第3点中的意思。看起来它像预期的那样工作。

相关问题