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

参见工作示例（整页）。

＆＃13;

<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>

＆＃13;

Bootstrap网格表格

1 个答案: