css - 如何将所有文本框对齐在一行中

Question

如何将所有文本框对齐在一行中？但在 IE 中它看起来像工作，但在 chrome 中，它不工作。有什么方法可以在两个浏览器中正确对齐所有文本框吗？

IE 11 看起来像这样：

铬看起来像这样：

或者也没有正确对齐：[ | ] 或 [ |]

HTML

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <form #myform="ngForm" (ngSubmit)="submit(myform)" class="form-form-submit">
      <div class="row">
        <div class="form-group">
          <label for="form_dob" class="control-label font-weight-bold">Fname *</label>
          <input type="text" name="fname">
        </div>
        <div class="form-group">
          <label for="form_ssn" class="control-label font-weight-bold">Last Number *</label>
          <input type="text" name="Lname">
        </div>
        <span>
          <div class="col-md-2 col-sm-4">
            <div class="line">|</div>
            <div>OR</div>
            <div class="line">|</div>
          </div>
        </span>
        <div class="form-group">
          <label for="form_ssn" class="control-label font-weight-bold">Code *</label>
          <input type="text" name="Cname">
        </div>
        <div class="form-group" style="padding-top: 30px;">
          <input type="submit" class="btn btn-primary" value="Submit" [disabled]="saving">
        </div>

      </div>
    </form>
  </div>
</div>

标签： cssbootstrap-4

Answer 1

<div class="col-md-2 col-sm-4 text-nowrap">
            <div class="line">|</div>
            <div>OR</div>
            <div class="line">|</div>
            </div>

为主 div 添加“text-nowrap”类并检查它。