Question

我正在创建一个表单，当我添加一个选择框时，布局无法按预期工作。选择框项目正在出现问题。我创建了JSFiddle here

我将我的元素放在form-group中，每个元素都有50％的宽度。

<div class="form-group col-sm-6">
            <label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
            <div class="col-sm-8">
                <select class="form-control" id="tipoDeuda">
                </select>
            </div>
        </div>

Answer 1

当我添加select时似乎工作正常。

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
              

           </style>
           </head>
           <body>
           
           <form class="form-horizontal" id="consultaCarteraForm">
        <div class="form-group col-sm-6">
            <label class="control-label input-sm col-sm-4" for="empleador">Empleador</label>
            <div class="col-sm-8">
                <input type="text" class="form-control input-sm" id="empleador" placeholder="">
                <i id="searchEmpleador" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
            </div>
        </div>
       
        <div class="form-group col-sm-6">
            <label class="control-label  input-sm col-sm-4" for="estudioAbogados">Estudio o Tercero</label>
            <div class="col-sm-8">
                <input type="text" class="form-control input-sm" id="estudioAbogados" placeholder="">
                <i id="searchEstudioAbogados" class="fa fa-search search-form-cartera-icon" aria-hidden="true"></i>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="control-label input-sm col-sm-4" for="tipoDeuda">Tipo de Deuda</label>
            <div class="col-sm-8">
                <select class="form-control" id="tipoDeuda">
                <option>select</option>
                <option>select1</option>
                  <option>select2</option>
                </select>
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="control-label
                         input-sm col-sm-4" for="devenguePorCobrar">Rango Devengue Por Cobrar</label>
            <div class="col-sm-4">
                <input type="text" class="form-control input-sm" id="devenguePorCobrar">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control input-sm" id="devenguePorCobrar1">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Real</label>
            <div class="col-sm-4">
                <input type="text" class="form-control input-sm" id="rangoMontoRealMin">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control input-sm" id="rangoMontoRealMax">
            </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="control-label input-sm col-sm-4" for="devenguePorCobrar">Rango Monto Deuda Presunta</label>
            <div class="col-sm-4">
                <input type="text" class="form-control input-sm" id="rangoMontoPresMin">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control input-sm" id="rangoMontoPresMax">
            </div>
        </div>
        <!-- Button -->
        <div class="col-sm-12 controls">
            <button id="btnBuscar" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-search"></span>&nbsp;BUSCAR </button>
            <button id="btnLimpiar" class="btn  btn-sm btn-default"><span class="glyphicon glyphicon-search"></span>&nbsp;LIMPIAR </button>
        </div>
        <div class="col-sm-4">
        </div>
    </form>
           </body>
           </html>

＆＃13;

Bootstrap 3中表单组和控件的布局问题

1 个答案: