Bootstrap 4 引导：对齐水平文本并控制列内的宽度

我正在努力实现这样的目标

我的代码如下

          <form class="needs-validation" action="submit_gene_entry.php" method="post">
            <div class="row ">
              <div class="col-xs-2 mb-3">
                <label for="geneLetters_postvar">Gene name</label>
              </div>
              <div class="col-xs-1 mb-3">
                <p class="input-group" >
                  <input name=geneLetters_postvar type=text  pattern="[a-z]{1,3}" class="form-control" placeholder="gene letters" required autofocus title="letters of the gene name">
                </p>
              </div>
              <div class="col-xs-1 mb-3 text-center">
                <label for="geneNumbers_postvar">-</label>
              </div>
              <div class="col-xs-2 mb-3">
                <p class="input-group" >
                  <input name=geneNumbers_postvar type=text pattern="[0-9]{1,6}" class="form-control" placeholder="gene numbers" title="numbers only" required>
                      </p>
                  </div>
            </div>
          </form>
      </div>

基因名


-

你可以看到它在行动中

---

如您所见，文本垂直偏离中心。为什么呢？而且表单字段太宽。我似乎无法将它们缩小，并将它们适当隔开。

我为您编辑了文本对齐方式：

<form class="needs-validation" action="submit_gene_entry.php" method="post">
    <div class="row ">
      <div class="col-xs-2 mb-3 v-center">
        <label for="geneLetters_postvar" style="padding-top: 5px; padding-right: 5px;">Gene name</label>
      </div>
      <div class="col-xs-1 mb-3">
        <p class="input-group" >
          <input name=geneLetters_postvar type=text  pattern="[a-z]{1,3}" class="form-control" placeholder="gene letters" required autofocus title="letters of the gene name">
        </p>
      </div>
      <div class="col-xs-1 mb-3 text-center">
        <label for="geneNumbers_postvar" style="padding-top: 5px; padding-right: 5px; padding-left: 5px;">-</label>
      </div>
      <div class="col-xs-2 mb-3">
        <p class="input-group" >
          <input name=geneNumbers_postvar type=text style="width:50%" pattern="[0-9]{1,6}" class="form-control" placeholder="gene numbers" title="numbers only" required>
              </p>
          </div>
    </div>
  </form>

---

将4替换为文本字段中所需的最大字母/数字数量，它将自动调整大小。

为什么要使用旧版本？你能使用更新的4.4吗？垂直对齐问题是一个重复的问题

maxlength="4" size="4"