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">

只需在类中添加行即可...

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

2 个答案: