如何對齊中心引導此公式？

Question

我有這個樣本：

鏈接

代碼HTML：

<div class="container-fluid">
    <div class="row">
      <div class="col-md-6 box1">
            <div class="row">
                    <div class="col-md-6">
                          <label for="firstname">First Name<span id="star">*</span></label>
                          <input type="text" name="firstname" id="firstname" placeholder="John">
                    </div>
            </div>

            <div class="row">
                    <div class="col-md-6">
                          <label for="firstname">First Name<span id="star">*</span></label>
                          <input type="text" name="firstname" id="firstname" placeholder="John">
                    </div>
            </div>


            <div class="row">
                    <div class="col-md-6">
                          <label for="firstname">First Name<span id="star">*</span></label>
                          <input type="text" name="firstname" id="firstname" placeholder="John">
                    </div>
            </div>



      </div>
      <div class="col-md-6 box2">sss</div>

    </div>
</div>

代碼CSS：

.box1{
    background:red;
  }
.box2{

    background:aqua;
    }

左側有三種形式，我希望這些形式與中心對齊...通過使用引導程序還應該做些什么？

提前致謝！

Answer 1

刪除嵌套的col-md-6因為它會將寬度調整為50％，並且不會使內容居中。 將text-center類添加到父容器。

 .box1 { background: red; } .box2 { background: aqua; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-6 box1 text-center"> <div class="row"> <label for="firstname">First Name<span id="star">*</span> </label> <input name="firstname" id="firstname" placeholder="John" type="text"> </div> <div class="row"> <label for="firstname">First Name<span id="star">*</span> </label> <input name="firstname" id="firstname" placeholder="John" type="text"> </div> <div class="row"> <label for="firstname">First Name<span id="star">*</span> </label> <input name="firstname" id="firstname" placeholder="John" type="text"> </div> </div> <div class="col-md-6 box2">sss</div> </div> </div> 

Answer 2

嘗試這個：

<div class="container-fluid">
<div class="row">
  <div class="col-md-6 box1 col-md-offset-3">
        <div class="row">
                <div class="col-md-6">
                      <label for="firstname">First Name<span id="star">*</span></label>
                      <input type="text" name="firstname" id="firstname" placeholder="John">
                </div>
        </div>

        <div class="row">
                <div class="col-md-6">
                      <label for="firstname">First Name<span id="star">*</span></label>
                      <input type="text" name="firstname" id="firstname" placeholder="John">
                </div>
        </div>


        <div class="row">
                <div class="col-md-6">
                      <label for="firstname">First Name<span id="star">*</span></label>
                      <input type="text" name="firstname" id="firstname" placeholder="John">
                </div>
        </div>



  </div>
  <div class="col-md-6 box2 col-md-offset-3">sss</div>

</div>