如何对齐引导列

Question

如何将第一列的第二个字段与第二列，第三列和第四列的第一个字段对齐，如下图所示，并使用Bootstrap使其响应？

＆＃13;

＆＃13;

.label1 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label2 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label3 {
  width: 60px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label4 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label5 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label6 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label7 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

＆＃13;

<div class="panel panel-default" id="period">
  <div class="panel-body">

    <form class="form-inline">
      <div class="container-fluid">
        <div class="row">

          <div class="col-md-4">


            <div class="row">
              <div class="form-group">
                <label class="label1">sss</label>
                <input type="text" class="form-control" id="pcode" size="9">
                <input type="text" class="form-control" id="pcName" size="20">
              </div>
            </div>




            <div class="row">
              <div class="form-group">
                <label class="label2">vvvv</label>
                <input type="text" class="form-control" id="pcode" size="9">

                <label class="label3">bbbb</label>
                <select class="form-control" id="btnClear">
		<option value="volvo">nnnn</option>
		<option value="saab">nnnn</option>
		<option value="opel">nnnnn</option>
		<option value="audi">nnnnn</option>
		</select>
              </div>
            </div>




            <div class="row">
              <div class="form-group">
                <label class="label4">hhhhhh</label>
                <input type="text" class="form-control" size="35">
              </div>
            </div>



            <div class="row">
              <div class="form-group">
                <label class="label5">jjjjj</label>
                <input type="text" class="form-control" size="35">
              </div>
            </div>




            <div class="row">
              <div class="form-group">
                <label class="label6"></label>
                <input type="text" class="form-control" size="35">
              </div>
            </div>


          </div>


          <div class="col-md-3">


            <div class="row">
              <div class="form-group">
                <label class="label1">kkkkkkk</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>


            <div class="row">
              <div class="form-group">
                <label class="label1">llllll</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>


            <div class="row">
              <div class="form-group">
                <label class="label1">2</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>


            <div class="row">
              <div class="form-group">
                <label class="label1">3</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>

          </div>

          <div class="col-md-3">

            <div class="row">
              <div class="form-group">
                <label class="label1">rrrrrra</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>

            <div class="row">
              <div class="form-group">
                <label class="label1">ttttt</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>


            <div class="row">
              <div class="form-group">
                <label class="label1">2</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>


            <div class="row">
              <div class="form-group">
                <label class="label1">3</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
          </div>


          <div class="col-md-2">

            <div class="row">
              <div class="form-group">
                <label class="label7">uuuuu</label>
                <input type="text" class="form-control" id="pcode" maxlength="20" size="7">
              </div>
            </div>

          </div>

        </div>
      </div>
      <br><br>


    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将第一个.form-group行移到第一列之外：

＆＃13;

＆＃13;

.label1 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label2 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label3 {
  width: 60px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label4 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label5 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label6 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

.label7 {
  width: 90px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
  font-weight: normal !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-default" id="period">
  <div class="panel-body">
    <form class="form-inline">
      <div class="container-fluid">
        <!-- THIS PIECE MOVED -->
        <div class="row">
          <div class="form-group">
            <label class="label1">sss</label>
            <input type="text" class="form-control" id="pcode" size="9">
            <input type="text" class="form-control" id="pcName" size="20">
          </div>
        </div>
        <!---------------------->
        <div class="row">
          <div class="col-md-4">
            <div class="row">
              <div class="form-group">
                <label class="label2">vvvv</label>
                <input type="text" class="form-control" id="pcode" size="9">
                <label class="label3">bbbb</label>
                <select class="form-control" id="btnClear">
                  <option value="volvo">nnnn</option>
                  <option value="saab">nnnn</option>
                  <option value="opel">nnnnn</option>
                  <option value="audi">nnnnn</option>
                </select>
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label4">hhhhhh</label>
                <input type="text" class="form-control" size="35">
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label5">jjjjj</label>
                <input type="text" class="form-control" size="35">
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label6"></label>
                <input type="text" class="form-control" size="35">
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="row">
              <div class="form-group">
                <label class="label1">kkkkkkk</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label1">llllll</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label1">2</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>


            <div class="row">
              <div class="form-group">
                <label class="label1">3</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <div class="row">
              <div class="form-group">
                <label class="label1">rrrrrra</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label1">ttttt</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label1">2</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="label1">3</label>
                <input type="text" class="form-control" size="20">
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <div class="row">
              <div class="form-group">
                <label class="label7">uuuuu</label>
                <input type="text" class="form-control" id="pcode" maxlength="20" size="7">
              </div>
            </div>
          </div>
        </div>
      </div>
      <br><br>
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;