使用纯 bootstrap 在输入类型之间添加文本

Question

我想在第一个输入元素之后添加一个帮助文本，如屏幕截图所示，我已经在下面的代码中尝试过，但它似乎不起作用。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">

  <div class="col-md-12">

    <div class="form-row">

      <div class="form-group col-md-6">

        <label for="inputEmail4">Repeat</label>

        <select class="form-control" id="exampleFormControlSelect2">

          <option>Daily</option>

          <option>Weekly</option>

          <option>Monthly</option>

          <option>Yearly</option>

        </select> at

      </div>



      <div class="form-group col-md-6">

        <label for="inputEmail4">Start Time</label>

        <div class="input-group timepicker">

          <input aria-label="Start Time" class="form-control ng-pristine ng-valid ng-touched make-timepicker" type="text">

          <div class="input-group-append">

            <span class="input-group-text"><i class="far fa-clock"></i></span>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

有什么方法可以仅使用纯 bootstrap 将文本 at 放在第一个输入元素之后？

Answer 1

我想出最接近的解决方案是将文本拆分到一个单独的列中并使用 my-auto

<div class="col-md-12">
   <div class="form-row">
      <div class="form-group col-md-6">
         <label for="inputEmail4">Repeat</label>
         <select class="form-control" id="exampleFormControlSelect2">
            <option>Daily</option>
            <option>Weekly</option>
            <option>Monthly</option>
            <option>Yearly</option>
         </select>
      </div>
      <div class="form-group col-md-1 my-auto">
         <p class="text-center">   at </p>
      </div>
      <div class="form-group col-md-5">
         <label for="inputEmail4">Start Time</label>
         <div class="input-group timepicker">
            <input aria-label="Start Time" class="form-control ng-pristine ng-valid ng-touched make-timepicker" type="text">
            <div class="input-group-append">
               <span class="input-group-text"><i class="far fa-clock"></i></span>
            </div>
         </div>
      </div>
   </div>
</div>

使用纯 bootstrap 在输入类型之间添加文本

using pure bootstrap add a text between to input type

bootstrap-4