twitter-bootstrap - Bootstrap 4表单列在一行中的另一列下方排列

Question

我有一个行为怪异的引导形式。一行的最后一列有两个元素。最后一个元素显示在第一个元素下方而不是右侧。

<div class="form-row">
  <div class="col-md-1"></div>
   <div class="form-group col-md-3">
    <select id="ExpMonth" class="form-control">
      <option selected>Exp. Month</option>
      <? for($x=1;$x<13;$x++){?>
      <option>
      <? if(strlen($x) < 2){?>0<?}?><?=$x?>
      </option>
      <? } ?>
    </select>
  </div>
 <div class="form-group col-md-3">
  <select id="ExpYear" class="form-control">
   <option selected>Exp. Year</option>
   <? for ($x=$thisyear;$x<=2034;$x++){?>
   <option><?=$x?></option>
   <? } ?>
  </select>
 </div>
<div class="form-group col-md-4">
 <input type="text" class="form-control" id="CVV2" placeholder="Security Code"><i class="fas fa-question-circle"></i>
</div>
<div class="col-md-1"></div>
</div>

Answer 1

改变这部分

<div class="form-group col-md-4">
  <input type="text" class="form-control" id="CVV2" placeholder="Security Code"><i 
  class="fa fa-question-circle"></i>
</div>

到

<div class="form-group col-md-4">
  <div class="input-group">
    <input type="text" class="form-control" id="CVV2" placeholder="Security Code">
      <span style="padding-top:5px;">
        <i class="fa fa-question-circle" aria-hidden="true"></i>
      </span>
   </div>
  </div>

Answer 2

代替

<div class="form-row"> 

（代码的第一行）你可以试试这个

<div class="form-row row"> 

只需将行添加到类...试试看