html - 如何对齐中心 Bootstrap 这个公式？

Question

我有这个样本:

link

代码 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;
    }

左边有三个表格，我希望这些表格居中对齐... 使用 bootstrap 还应该做些什么？

提前致谢!

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>