ブートストラップグリッドレイアウト第2の行整形

Question

Sample Layout

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 

 
      <div class="col-md-4 col-lg-4" style="background-color:aquamarine"> 
 

 
       <div class="form-group"> 
 
        <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label1:</label> 
 
        <div class="col-md-8 col-lg-8"><input type="text" class="form-control" /></div> 
 
       </div> 
 

 

 
      </div> 
 
      <div class="col-md-4 col-lg-4" style="background-color:aquamarine"> 
 

 
       <div class="form-group"> 
 
        <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label2:</label> 
 
        <div class="col-md-8 col-lg-8"><input type="text" class="form-control"/></div> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-4 col-lg-4" style="background-color:aquamarine"> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label3:</label> 
 
        <div class="col-md-8 col-lg-8"><input type="text" class="form-control" /></div> 
 
       </div> 
 
      </div> 
 

 

 
     </div> 
 

 
    <div class="row"> 
 

 
     <div class="col-md-12 col-lg-12" style="background-color:red"> 
 
      <div class="form-group"> 
 
       <label class="col-md-4 col-lg-4 control-label" style="background-color:burlywood">Label4:</label> 
 
       <div class="col-md-8 col-lg-8"><input type="text" class="form-control" /></div> 
 
      </div> 
 
     </div>    
 

 

 
    </div>

私はこのブートストラップ・レイアウトを有します。私は2番目の行のコントロールを整列することに問題があります。

私はラベル4ラベル1.下に整列させ、その後、私は（行の3つのチェックボックスで、あるいはチェックボックスのリスト）テキストボックスに使用する幅の残りの部分をしたい

私はできませんよこれを行う方法を理解してください。助けていただければ幸いです。

Answer 1

方法について：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="form-group" style="margin: 0;"> 
      <label class="col-md-1 control-label" style="background-color:burlywood">Label1:</label> 
      <div class="col-md-3"><input type="text" class="form-control" /></div> 
     </div> 

     <div class="form-group" style="margin: 0;"> 
      <label class="col-md-1 control-label" style="background-color:burlywood">Label2:</label> 
      <div class="col-md-3"><input type="text" class="form-control" /></div> 
     </div> 

     <div class="form-group" style="margin: 0;"> 
      <label class="col-md-1 control-label" style="background-color:burlywood">Label3:</label> 
      <div class="col-md-3"><input type="text" class="form-control"/></div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="form-group"> 
     <label class="col-md-1 control-label" style="background-color:burlywood">Label4:</label> 
     <div class="col-md-11"><input type="text" class="form-control" /></div> 
    </div> 
</div> 

フィドル： https://jsfiddle.net/oligustafsson/cpqor8kx/2/