在 bootstrap 中混合内联和垂直表单

Question

我想要这样的东西

所以我做了以下事情

   <div class="container">
    <div class="row">
        <div class="page-account-box">
            <div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
                <div class="account-box">
                    <div class="picture_account">
                        <img src="~/images/d2.jpg" class="imgFormat " />
                    </div>
                    <div class="account-box-content mt-4">
                        
                        <h4>Register</h4>
                         <form method="post" class="form-group ">
                            <div class="row pt-2">
                                <div style="display:inline">
                                    <label>Name </label>
                                    <input type="text" class="col-md-4" id="FirstName">
                                </div>
                                <div style="display:inline">
                                    <label>Lastname </label>
                                    <input type="text" class="col-md-4" id="LastName">
                                </div>
                            </div>


                            <div class="row pt-2">
                                <div>
                                    <label>Email  </label>
                                    <input type="email" class="col-md-8" id="Email" />
                                </div>
                            </div>

                            <div class="row pt-2">
                                <div>
                                    <label>Mobile  </label>
                                    <input type="text" class="col-md-8" id="Mobile">
                                </div>
                            </div>                                
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是 css

 .page-account-box .account-box .account-box-content {
        min-height: 50%;
        padding: 15px 20px;
        text-align: center;
        border-radius: 20px;
        display: inline;
        border: 2px solid black;
        width: 100%;
    }

 .page-account-box  .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 70px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
}

却变成了这样

我该怎么做？

Answer 1

使用 bootstrap class 并删除 display:inline;

col 应该是 row class

的直系子代

html

<div class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-md-9 mx-auto">
        <div class="account-box">
          <div class="account-box-content mt-4">
            <h4>Register</h4>
            <form method="post" class="form-group ">
              <div class="row pt-2 ">
                <div class="col-6">
                  <div class="row">
                    <div class="col-8">
                      <input type="text" id="FirstName">
                    </div>
                    <label class="col-4">Name </label>
                  </div>
                </div>
                <div class="col-6">
                  <div class="row">
                    <div class="col-8">
                      <input type="text" id="LastName">
                    </div>
                    <label class="col-4">Lastname </label>
                  </div>
                </div>
              </div>
              <div class="row pt-2">
                <div class="col-10">
                  <input type="email" class="w-100" id="Email" />
                </div>
                <label class="col-2">Email </label>
              </div>

              <div class="row pt-2">
                <div class="col-10">
                  <input type="text" class="w-100" id="Mobile">
                </div>
                <label class="col-2">Mobile </label>
              </div>
            </form>
          </div>
          <div class="picture_account">
            <img src="~/images/d2.jpg" class="imgFormat " />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css

     .page-account-box .account-box .account-box-content {
        min-height: 50%;
        padding: 15px 20px;
        text-align: center;
        border-radius: 20px;
/*         display: inline; */
        border: 2px solid black;
        width: 100%;
    }

 .page-account-box  .account-box {
    width: 100%;
    height: auto;
    padding: 0;
    border: 1px solid #e2efef;
    -webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
    box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
    position: relative;
    margin: 70px auto 30px;
    display: flex;
    background: #fff;
    border-radius: 20px;
}
.account-box-content form label{
  text-align: right;
}

在 bootstrap 中混合内联和垂直表单

Mix inline and vertical Form in bootstrap

html

css

bootstrap-4