Bootstrap Modal：无法在框旁边对齐我的文字

Try the following code. it will work for you. You haven't inserted the row class in order to get the two fields in the same line and you will need to you col-md classes in order to fit your message box in medium-size screens.

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Update Staff</button>

<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-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">New message</h5>
              <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">
                <div class="form-group row">
                  <label
                    for="name"
                    class="col-sm-2 col-md-2 control-label d-flex align-items-center"
                    >Name</label
                  >
                  <div class="col-sm-10 col-md-10">
                    <input
                      id="name"
                      class="form-control"
                      type="text"
                      placeholder="Enter Your Full Name"
                    />
                  </div>
                </div>
                <div class="form-group row">
                  <label
                    for="email"
                    class="col-sm-2 col-md-2 control-label d-flex align-items-center"
                    >Email-Id</label
                  >
                  <div class="col-sm-10 col-md-10">
                    <input
                      id="email"
                      class="form-control"
                      type="email"
                      placeholder="Enter Your Email-Id"
                    />
                  </div>
                </div>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-secondary mr-2"
                    data-dismiss="modal"
                  >
                    Close
                  </button>
                  <button type="Submit" class="btn btn-primary">Done</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

<div class="form-group d-flex align-items-baseline">

您可以将它们添加到表单组类中。

同样，标签和输入必须内联起来才能组合在一起。引导程序中的form-control类使给定元素的显示块。你也可以用这个在这里，我只是添加了表单组行类：

<div class="form-group row"> // just added the row class
   <label for="name" class="col-sm-2 control-label" >Name</label>
   <div class="col-sm-10">
      <input id="name" class="form-control" type="text" placeholder="Enter Your Full Name" />
  </div>
</div>