Layout-Problem mit Formulargruppe und Steuerelement in Bootstrap 3

Ich bin ein Formular erstellen und wenn ich ein Auswahlfeld hinzufügen, funktioniert das Layout nicht wie erwartet. Die Auswahlbox erhält Probleme. Ich habe erstellt JSFiddle here Layout-Problem mit Formulargruppe und Steuerelement in Bootstrap 3

Ich lege meine Elemente in Form-Gruppe mit jeweils 50% der Breite.

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

Quelle

2017-02-15 s_k_t

Sieht rechts in Chrome. Labels sind col-4, select ist col-8 in einem col-6 verschachtelt. Aufnahme von 50% des Formulars. Kannst du weiter erklären, welche Probleme du erlebst? –

Das Layout wird zerstört, Sie können in der Geige sehen –

Was ist das Problem? Ist es die 5. Gruppe "Rango Monto Deuda Real", die auf der linken Seite der 3. Zeile und nicht auf der rechten Seite (nach der Auswahl hinzugefügt wird)? "nicht funktioniert wie erwartet" und "werde zerstört" sind für mich unklar ... – FelipeAls

Es scheint gut zu funktionieren, wenn ich ausgewählt habe.

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

Quelle

2017-02-15 14:07:23 neophyte

Layout-Problem mit Formulargruppe und Steuerelement in Bootstrap 3

Antwort

Verwandte Themen