我的输入类型滑块值显示在滑块下方，但我不知道为什么

Question

我有允许用户选择具有输入类型范围的百分比的 html 代码。这是我正在使用的代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <label for="beneName">Name</label>
            <input class="form-control form-control-sm" type="text" name="beneName" id="beneName" placeholder="@Model.BeneficiaryUpdateData[r].beneName" required="">
       </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <label for="beneAddressLine1">Address Line 1</label>
            <input class="form-control" type="text" name="beneAddressLine1" id="beneAddressLine1" placeholder="@Model.BeneficiaryUpdateData[r].beneAddressLine1" required="">
        </div>
   </div>
   <div class="row">
       <div class="col-md-12">
           <label for="beneAddressLine2">Address Line 2</label>
           <input class="form-control" type="text" name="beneAddressLine2" id="beneAddressLine2" placeholder="@Model.BeneficiaryUpdateData[r].beneAddressLine2" required="">
       </div>
   </div>
   <div class="row">
       <div class="col-md-12">
           <label for="beneAddressLine3">Address Line 3</label>
           <input class="form-control" type="text" name="beneAddressLine3" id="beneAddressLine3" placeholder="@Model.BeneficiaryUpdateData[r].beneAddressLine3" required="">
       </div>
   </div>
   <div class="row">
       <div class="col-md-6">
           <label for="beneSSN">Social Security Number</label>
           <input class="form-control" type="text" name="beneSSN" id="beneSSN" placeholder="@Model.BeneficiaryUpdateData[r].beneSSN" required="">
       </div>
  <div class="col-mid-6">
      <div class="form-group">
          <label for="benePercent" class="form-label">Percentage</label>
          <input type="range" name="benePercent" id="benePercent" class="percentAlign" value="@Model.BeneficiaryUpdateData[r].benePctInt" min="0" max="100" oninput="this.nextElementSibling.value = this.value">
          <output class="percentAlign">@Model.BeneficiaryUpdateData[r].benePctInt</output>
      </div>
  </div>
</div>

这是 percentAlign 的 css：

    .percentAlign {
        display: inline-block;
        vertical-align: middle;
    }

这就是生成的内容：

我不明白为什么百分比值显示在滑块下方而不是旁边。

非常感谢任何帮助。

谢谢。

第一次编辑：Drexx_Dusan 建议的小改动。现在，滑块到达<DIV> 的末尾，但<OUTPUT> 仍显示在滑块下方，而不是旁边。

Answer 1

它不起作用，因为您在最后一个表单组上方的 div 中有 col-mid-6 而不是 col-md-6。