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

我尝试使用引导程序(水平形式)制作模态形式,并且字段显示在标签下。知道如何解决它,以便输入文本框位于标签的右侧而不是标签的下方吗? 我整天都在努力使它与盒子对齐,但无济于事。请帮助。

   <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">
                                <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>
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">Email-Id</label>
                                <div class="col-sm-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" data-dismiss="modal">Close</button>
                                <button type="Submit" class="btn btn-primary">Done</button>
                            </div>      
                        </form>
                    </div>
                </div>
            </div>
        </div>
评论
夜伴歌笙
夜伴歌笙

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>
点赞
评论