动态形式的网格系统设计(Bootstrap 3)

时间:2014-10-30 15:11:10

标签: html5 twitter-bootstrap-3

我是bootstrap中的新手,我试图做一个包含文本字段,选择和表格的表单,这些表格将是对文本字段或选择中接收的数据的描述。 我想构建一个在网格系统内部允许我进行以下操作的表单: 第一个图像是我想要的,第二个图像是发生的

That I want

That's happend

这是我表格的一部分:

<form id="form_inscripcion_act" class="form-horizontal well">
<div class="form-group form-inline">
            <label for="cod_miembro" class="col-sm-2 control-label">Miembro</label>
            <div class="col-sm-2">
                  <select style="width: 250px" id="cod_miembro"></select>
            </div>
            <div class="col-sm-2 control-label">
                <a id="valida_miembro" rel="popover"> </a>
            </div>
            <label for="sexo" class="col-xs-12 col-sm-5 col-md-6 control-label">This is the table that I want in my case, but it´s only show at the first line  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; imdimied imedimeijfimd imdimdi imdimeimdimie imdiemidneimdimiemd imdimedi iemdiedmid imedimdimed</label>
          </div>
          <div class="form-group form-inline">  
            <label for="departamentos" class="col-sm-2 control-label"><i class="fa fa-refresh fa-spin loader_icon"></i>&nbsp;&nbsp; Departamentos</label>
              <div class="col-sm-2">
                  <select style="width: 250px" id="cod_departamento"></select>
              </div>
              <div class="col-sm-2 control-label">
                <a id="valida_departamento" rel="popover"> </a>
            </div>
          </div>
          <div class="form-group form-inline">
            <label for="actividades" class="col-sm-2 control-label"><i class="fa fa-refresh fa-spin loader_icon2"></i>&nbsp;&nbsp; Actividad</label>
            <div class="col-sm-2">
                <select style="width: 250px" id="cod_actividades"></select>
            </div>
            <div class="col-sm-2 control-label">
                <a id="valida_actividad" rel="popover"> </a>
            </div>
          </div>
          <div class="form-group form-inline">
            <label for="secciones" class="col-sm-2 control-label"><i class="fa fa-refresh fa-spin loader_icon3"></i>&nbsp;&nbsp; Secciones</label>
            <div class="col-sm-2">
                <select style="width: 250px" id="cod_seccion" >
                </select>
                <a id="valida_seccion" rel="popover"> </a>
            </div>
          </div>
          <div class="form-group form-inline">
            <label for="desc_secc" class="col-sm-2 control-label"><i class="fa fa-refresh fa-spin loader_icon4"></i></label>
            <div class="col-sm-6">
            <label id="desc_secc"></label>
            </div>
          </div>
          <div class="form-group form-inline">
            <label for="precios" class="col-sm-2 control-label">&nbsp;</label>
            <div class="col-sm-2">
                <button class="btn btn-orange btn-block" type="button" onClick="validarPaso2()">Siguiente <i class="fa fa-arrow-circle-o-right"></i></button>
            </div>
            <div class="col-sm-2">
                <a class="control-label" id="valida_paso2" rel="popover">&nbsp;</a>
            </div>
          </div>
        </form>

抱歉我的英语不好,谢谢你的帮助

0 个答案:

没有答案