引导网格形式

Bootstrap Grid Form

本文关键字：网格更新时间：2023-09-26

我正试图修改一个表单，其中有字段和值到另一个有两列，像这样。

现在我有:

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>

希望有人能帮助我。

谢谢!

如果你想设置你的窗体有两个边，你可以嵌套你的列/行拆分成部分。文档

见工作示例(整页)。

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