html - Bootstrap 模态表单空格问题

Question

表单的第一行前面似乎有空格，但无法识别它前面的内容或实际导致此问题的原因，最后 2 行工作正常，但在调整网络后屏幕，它将文本框推出表单，非常感谢任何帮助或建议。

.input-lgchan {
  height: 40px;
  width: 32rem;
  padding: 10px 30px;
  font-size: 15px;
  line-height: 1.3333333;
  border-radius: 6px;
}

#output_image {
  border-style: solid;
  float: left;
  position: relative;
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: relative;
  z-index: -1;
}

.label {
  opacity: 0;
}

.inputfile+label {
  position: relative;
  font-size: 2.5em;
  display: inline-block;
  color: black;
  text-align: center;
  padding: 2px 2px;
  text-decoration: none;
  float: left;
}

.inputfile:focus+label,
.inputfile+label:hover {}

.inputfile+label {
  cursor: pointer;
}

.iconplus {
  position: relative;
}

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
            Instagram Like
        </button>

<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl  modal-dialog-right" role="document">
    <div class="modal-content">
      <div class="modal-header ">
        <h2 style="font-family: Lato; font-size:29pt; font-weight:bold;" class="modal-title " id="exampleModalLongTitle">Instagram</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
      </div>

      <div class="modal-body form-horizontal">
        <form class="form-horizontal" id="step2">
          <img id="output_image" height=270px width=270px>
          <input class="inputfile" type="file" id="getFile" accept="image/*" onchange="preview_image(event)">
          <label for="getFile" <i class="fa fa-plus-circle iconplus" style="position:relative; top:23.1rem; right:3.45rem;"></i> </label>



          <div class="form-group row align-items-center justify-content-center">
            <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left">Staff ID:</label>
            <div class="col-sm-5 ">
              <input id="name" class="form-control input-lg row align-items-left justify-content-left" style="margin-right:6.8rem;" type="text" placeholder="Enter Your Email Address" />
            </div>
          </div>

          <div class="form-group row align-items-center justify-content-center">
            <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left">Email:</label>
            <div class="col-sm-5 ">
              <input id="name" class="form-control input-lg row align-items-left justify-content-left" type="text" placeholder="Enter Your Email Address" />
            </div>
          </div>

          <div class="form-group row align-items-center justify-content-center">
            <label style="font-family:Lato; font-size:20pt; font-weight:normal;" for="name" class="col-sm-4 control-label col text-left">Email:</label>
            <div class="col-sm-5 ">
              <input id="name" class="form-control input-lg row align-items-left justify-content-left" type="text" placeholder="Enter Your Email Address" />
            </div>
          </div>
        </form>
      </div>


      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Create</button>
      </div>
    </div>
  </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

</body>

标签： htmlcssbootstrap-modal