Bootstrap Grid表格

Question

我試圖修改一個窗體，其中有兩個欄的字段和值變成另一個，像這樣。

現在我有：

HEADER 1 
FIELD 1: VALUE 
FIELD 2: VALUE 
FIELD 3: VALUE 
HEADER 2 
FIELD 4: VALUE 
FIELD 5: VALUE 
FIELD 6: VALUE 

我試着這樣做：

HEADER 1   HEADER 2 
FIELD 1: VALUE FIELD 4: VALUE 
FIELD 2: VALUE FIELD 5: VALUE 
FIELD 3: VALUE FIELD 6: VALUE 

這裏是我的代碼：

<div class="row"> 

    <div class="col-lg-6 col-md-6"> 
      <div> <h3> Datos Personales </h3><hr></div> 
       <div class="form-group"> 
        <label class="control-label col-md-2">DNI</label> 
        <div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->usi_dni?>'></div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-md-2">Apellido y Nombre</label> 
        <div class="col-md-8"><input class="form-control input-sm" name="apynom" value='<?=$beca->usi_nombre?>'></div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-md-2">Legajo</label> 
        <div class="col-md-8"><input class="form-control input-sm" name="legajo" value='<?=$beca->usi_legajo?>'></div> 
       </div> 

     <div> <h3> Datos Laborales </h3><hr></div> 
       <div class="form-group"> 
        <label class="control-label col-md-2">Fecha Ingreso PJCABA</label> 
        <div class="col-md-8"><input class="form-control input-sm" name="dni" value='<?=$beca->f_ingreso_caba?>'></div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-md-2">Fuero</label> 
        <div class="col-md-8"> 
         <select class="form-control" name="car_id"> 
          @foreach($helpers['fuero'] as $key=>$fuero) 
          <?php if($fuero->fuero_id == $beca->fuero_id){?> 
          <option value="{{$fuero->fuero_id}}" selected>{{$fuero->fuero_nombre}}</option> 
          <?php }else{?> 
          <option value="{{$fuero->fuero_id}}">{{$fuero->fuero_nombre}}</option> 
          <?php }?> 
          @endforeach 
         </select> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="control-label col-md-2">Dependencia</label> 
        <div class="col-md-8"> 
         <select class="form-control" name="car_id"> 
          @foreach($helpers['cargos'] as $key=>$cargo) 
          <?php if($cargo->car_id == $beca->cargo_id){?> 
          <option value="{{$cargo->car_id}}" selected>{{$cargo->car_nombre}}</option> 
          <?php }else{?> 
          <option value="{{$cargo->car_id}}">{{$cargo->car_nombre}}</option> 
          <?php }?> 
          @endforeach 
         </select> 
        </div> 
       </div> 

      <div class="form-group"> 
       <div class="col-md-offset-2 col-md-10"> 
        <button type="submit" class="btn btn-default">Aceptar</button> 
        <a href="#" class="btn btn-default">Cancel</a> 
       </div> 
      </div> 

     </form> 
    </div> 

希望有人能幫助我。

謝謝！

Answer 1

如果您嘗試將表單設置爲雙面，則可以將您的列/行嵌套以將其分割成多個部分。 Docs

查看工作示例（整頁）。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form id="theForm"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <!-- START CONTAINER--> 
 
     <div class="col-sm-6"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <h3>Datos Personales</h3> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <label class="control-label">DNI</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="form-group"> 
 
       <input class="form-control input-sm" name="dni"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <label class="control-label">Apellido y Nombre</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="form-group"> 
 
       <input class="form-control input-sm" name="apynom"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <label class="control-label">Legajo</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="form-group"> 
 
       <input class="form-control input-sm" name="legajo"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- END CONTAINER--> 
 
     <!-- START CONTAINER--> 
 
     <div class="col-sm-6"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <h3>Datos Laborales</h3> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <label class="control-label">Fecha Ingreso PJCABA</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="form-group"> 
 
       <input class="form-control input-sm" name="dni"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <label class="control-label">Fuero</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="form-group"> 
 
       <select class="form-control" name="car_id"> 
 
       <option selected>1</option> 
 
       <option>2</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <label class="control-label">Dependencia</label> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="form-group"> 
 
       <select class="form-control" name="car_id"> 
 
       <option selected>1</option> 
 
       <option>2</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- END CONTAINER--> 
 
     <div class="col-sm-12"> 
 
     <div class="form-group"> 
 
      <button type="submit" class="btn btn-default">Aceptar</button> <a href="#" class="btn btn-default">Cancel</a> 
 

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