¿Cómo puedo realizar la entrada de grupo consiste en dos entradas?

<div class="input-group">
    <input type="text" class="form-control" placeholder="MinVal">
    <input type="text" class="form-control" placeholder="MaxVal">
</div>

Esto no funciona, ellos están en horizontal en lugar de en línea

  • Mi solución no requiere ningún css y funciona con cualquier combinación de entrada-addon, de entrada-btn y la forma de control. Sólo utiliza los pre-existente bootstrap clases de stackoverflow.com/a/34208228/2273611

11 Comentarios

  1. 43

    Suponiendo que usted quiere que ellos al lado del otro:

    <form action="" class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="MinVal">
        </div>
        <div class="form-group">    
             <input type="text" class="form-control" placeholder="MaxVal">   
        </div>
    </form>

    JSFiddle

    Actualización Nº 1: caso de que desee utilizar .input-group con este ejemplo:

    <form action="" class="form-inline">
        <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">@</span>
              <input type="text" class="form-control" placeholder="Username">
            </div>
        </div>
        <div class="form-group">    
            <div class="input-group">
              <input type="text" class="form-control">
              <span class="input-group-addon">.00</span>
            </div>
        </div>
    </form>

    JSFiddle

    La clase .input-group está ahí para extender los insumos con los botones y tal (conectado directamente). Casillas de verificación o botones de radio también son posibles. No creo que se trabaja con dos campos de entrada, aunque.

    Actualización Nº 2: Con .form-horizontal la .form-group etiqueta básicamente, se convierte en un .row etiqueta de modo que usted puede utilizar la columna de clases, tales como .col-sm-8:

    <form action="" class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="MinVal">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder="MaxVal">
            </div>
        </div>
    </form>

    Actualizado JSFiddle con los tres ejemplos

    • Quiero usar de forma horizontal, pero en una línea que tiene que tener 2 entradas
    • Si estás utilizando el formulario-horizontal, entonces usted está utilizando el sistema de la red de manera que usted tendrá la col – atributos. He añadido un tercer ejemplo que demuestra esta técnica.
    • gracias por ayudarme
    • Hay <div class="clearfix"></div> faltan dentro de <div class="form-group">...</div>
    • El problema con form-horizontal es que cuando la pantalla es más pequeña(y está utilizando la xs estilos) de las dos entradas son en líneas separadas (lo cual es bueno, si alguien lo quiere hacer sensible), PERO no hay ningún espacio entre ellos. ¿Cuál sería la solución en este caso?
    • Mejor respuesta sin necesidad de CSS o modificaciones +1
    • No clearfix es necesario, su form-group debe ser envuelto en <form class='form-horizontal'></form>

  2. 107

    de trabajo solución:

    <div class="input-group">
        <input type="text" class="form-control input-sm" value="test1" />
        <span class="input-group-btn" style="width:0px;"></span>
        <input type="text" class="form-control input-sm" value="test2" />
    </div>

    desventaja: no border-collapse entre los dos campos de texto, pero que siguen uno al lado del otro

    http://jsfiddle.net/EfC26/

    Actualización

    gracias a Stalinko

    Esta técnica permite que el pegamento más de 2 entradas.
    Frontera de contracción se logra utilizando "margin-left: -1px" (-2px para la 3ra entrada y así sucesivamente)

    <div class="input-group">
      <input type="text" class="form-control input-sm" value="test1" />
      <span class="input-group-btn" style="width:0px;"></span>
      <input type="text" class="form-control input-sm" value="test2" style="margin-left:-1px" />
      <span class="input-group-btn" style="width:0px;"></span>
      <input type="text" class="form-control input-sm" value="test2" style="margin-left:-2px" />
    </div>

    http://jsfiddle.net/yLvk5mn1/1/

    • ¿Cómo cambiar el ancho de las entradas? Siempre es de 50/50.
    • No te olvides de especificar los acolchados, porque incluso con un ancho de cero elemento todavía la tiene.
    • gracias por la solución.
    • Gracias por esta solución. input-group-btn me funciona mejor que input-group-addon ya que el tamaño del addon es de alguna manera no proporcional con el tamaño de la caja de entrada.
    • La adición de border-left: 0; a la segunda entrada de colapso de las fronteras
    • Yo prefiero el estilo de la border de los insumos, en lugar de establecer -ve márgenes. Es tan simple como la creación de border-right: 0; al 1 de entrada, border-left: 0; a última entrada y border-left: 0; border-right: 0; a todas las otras entradas en .input-group (inspiración de @MbengueAssane comentario). De lo contrario, con -ve márgenes habrá notable diferencia en el ancho total de la .form-group con 3 o más entradas en .input-group

  3. 68

    Que casi nunca se hace intuitivo sentido tener dos entradas, uno junto a otro sin etiquetas. Aquí es una solución con las etiquetas de mezclado, que también funciona bastante bien con sólo una modificación menor a la existente estilos de Bootstrap.

    Vista previa:
    Grupo de entrada - dos entradas de cerca uno del otro

    HTML:

    <div class="input-group">
      <span class="input-group-addon">Between</span>
      <input type="text" class="form-control" placeholder="Type something..." />
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">and</span>
      <input type="text" class="form-control" placeholder="Type something..." />
    </div>

    CSS:

    .input-group-addon {
      border-left-width: 0;
      border-right-width: 0;
    }
    .input-group-addon:first-child {
      border-left-width: 1px;
    }
    .input-group-addon:last-child {
      border-right-width: 1px;
    }

    JSFiddle:
    http://jsfiddle.net/yLvk5mn1/31/

    • «Casi nunca se hace intuitivo sentido tener dos entradas, uno junto a otro sin etiquetas.» – mi caso de uso se especifica un «desde el año hasta el año» de la gama. Fue en una página de búsqueda, por lo que el espacio era una gran preocupación.
    • justo lo suficiente, acaba ofreciendo una solución para aquellos que no tienen las mismas restricciones. saludos
    • Tarjeta de crédito, fecha de vencimiento, de la lista de inicio y fin de los tiempos, de la Cuenta Bancaria del presupuesto de apoyo BIENAL números, Guiones de los códigos de productos. Estoy a menos de un 10% a través de un CRM y ya he encontrado estos 4 intuitiva razones de línea de campos. Además inline campos están soportados por Bootstrap desde .form-group y .row van de la mano.
    • Se le olvidó un escenario cuando usted debe seleccionar unidades de medida. Por ejemplo, Si tiene un campo de tipo integer y, a continuación, seleccione para Bytes/KBytes/MBytes/..., que siempre quieren que plase tan cerca unos de otros como sea posible.
    • Funciona bien incluso si usted no desea que las etiquetas entre, acaba de salir de la class="input-group-addon" vacío y el conjunto `padding: 0′ en la clase
    • Bonita respuesta. Por CIERTO, no hay necesidad de CSS personalizado si usted ya tiene style atributo como en la respuesta

  4. 10

    Para mostrar más de una entradas en línea sin el uso de «formulario en línea» de la clase puede utilizar el siguiente código:

    <div class="input-group">
        <input type="text" class="form-control" value="First input" />
        <span class="input-group-btn"></span>
        <input type="text" class="form-control" value="Second input" />
    </div>

    A continuación, utilizando los selectores de CSS:

    /* To remove space between text inputs */
    .input-group > .input-group-btn:empty {
        width: 0px;
    }

    Básicamente, usted tiene que insertar un vacío span etiqueta con «de entrada-grupo-btn» clase entre de entrada etiquetas.

    Si quieres ver más ejemplos de grupos de entrada y arranque-seleccionar los grupos de echar un vistazo a esta URL:
    http://jsfiddle.net/vkhusnulina/gze0Lcm0

  5. 9

    Si quieres incluir un campo «Título» dentro de lo que pueden ser seleccionados con el <select> elemento HTML, que también es posible

    Vista previa
    Grupo de entrada - dos entradas de cerca uno del otro

    FRAGMENTO DE CÓDIGO

    <div class="form-group">
      <div class="input-group input-group-lg">
        <div class="input-group-addon">
          <select>
            <option>Mr.</option>
            <option>Mrs.</option>
            <option>Dr</option>
          </select>
        </div>
        <div class="input-group-addon">
          <span class="fa fa-user"></span>
        </div>
        <input type="text" class="form-control" placeholder="Name...">
      </div>
    </div>
    • Por el momento, esta es la única respuesta que utiliza bootstrap y un grupo de entrada. He aquí un jsfiddle el uso de una ligera mejora de la versión de código: jsfiddle.net/qPdcs/1015
  6. 8

    Crear una entrada de grupo de pegamento de la clase con este:

    CSS:

    .input-group-glue {
      width: 0;
      display: table-cell;
    }
    
    .input-group-glue + .form-control {
      border-left: none;
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="input-group">
      <input type="text" class="form-control" value="test1" />
      <span class="input-group-glue"></span>
      <input type="text" class="form-control" value="test2" />
      <span class="input-group-glue"></span>
      <input type="text" class="form-control" value="test2" />
    </div>

  7. 7

    He buscado esto un par de minutos y no podía encontrar ningún código de trabajo.

    Pero ahora finalmente lo hizo ! Echale un vistazo:

    <div class="input-group" id="unified-inputs">
    <input type="text" class="form-control" placeholder="MinVal" />
    <input type="text" class="form-control" placeholder="MaxVal" />
    </div>

    Y css

    #unified-inputs.input-group { width: 100%; }
    #unified-inputs.input-group input { width: 50% !important; }
    #unified-inputs.input-group input:last-of-type { border-left: 0; }

    http://jsfiddle.net/4Ln8d7zq/)

  8. 2

    Yo no estaba contento con ninguna de las respuestas en esta página, así que me jugueteó con esto me para un poco. Se me ocurrió la siguiente

    JS:

    angular.module('showcase', []).controller('Ctrl', function() {
      var vm = this;
      vm.focusParent = function(event) {
        angular.element(event.target).parent().addClass('focus');
      };
    
      vm.blurParent = function(event) {
        angular.element(event.target).parent().removeClass('focus');
      };
    });

    CSS:

    .input-merge .col-xs-2,
    .input-merge .col-xs-4,
    .input-merge .col-xs-6 {
      padding-left: 0;
      padding-right: 0;
    }
    .input-merge div:first-child .form-control {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .input-merge div:last-child .form-control {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .input-merge div:not(:first-child) {
      margin-left: -1px;
    }
    .input-merge div:not(:first-child):not(:last-child) .form-control {
      border-radius: 0;
    }
    .focus {
      z-index: 2;
    }

    HTML:

    <html ng-app="showcase">
    
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    
    <body class="container">
      <label class="control-label">Person</label>
      <div class="input-merge" ng-controller="Ctrl as showCase">
        <div class="col-xs-4">
          <input class="form-control input-sm" name="initials" type="text" id="initials"
                 ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
                 ng-model="person.initials" placeholder="Initials" />
        </div>
    
        <div class="col-xs-2">
          <input class="form-control input-sm" name="prefixes" type="text" id="prefixes"
                 ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
                 ng-model="persoon.prefixes" placeholder="Prefixes" />
        </div>
    
        <div class="col-xs-6">
          <input class="form-control input-sm" name="surname" type="text" id="surname"
                 ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
                 ng-model="persoon.surname" placeholder="Surname" />
        </div>
      </div>
    </body>
    
    </html>

    Con esto es posible ajustar el ancho de cada una de las entradas a su gusto. También un problema menor con la por encima de los fragmentos era que la entrada se ve incompleta cuando focalizado o cuando no es válida. He arreglado con un poco de angular código, pero puede hacerlo fácilmente con jQuery o nativos de javascript o lo que sea.

    El código añade la clase .el enfoque para el div contenedor, por lo que puede conseguir una mayor z-index, a continuación, a los demás cuando la entrada está enfocada.

    • cómo convertir en la función normal? porque no entiendo angular… yo no puedo entrar en la lógica de su código
    • el angular código de respuesta no tiene nada que ver con el estilo. Probablemente no sólo para la integridad
  9. 2

    Mi solución no requiere ningún css y funciona con cualquier combinación de entrada-addon, de entrada-btn y la forma de control.
    Sólo utiliza los pre-existente bootstrap clases

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <form style="padding:10px; margin:10px" action="" class=" form-inline">
      <div class="form-group">
        <div class="input-group">
        <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="MinVal">
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="MaxVal">
            </div>
          </div>
        </div>
      </div>
    </form>

    Esto va a estar en línea si hay espacio y envoltura para las pantallas más pequeñas.

    Ejemplo completo ( entrada-addon, de entrada-btn y la forma de control. )

    jsfiddle

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <form style="padding:10px; margin:10px" action="" class=" form-inline">
    <div class="form-group">
    <div class="input-group">
    <div class="form-group">
    <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span></span>
    </div>
    </div>
    <div class="form-group">
    <div class="input-group">
    <span></span>
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span></span>
    </div>
    </div>
    <div class="form-group">
    <div class="input-group">
    <span></span>
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span></span>
    </div>
    </div>
    <br>
    <div class="form-group">
    <div class="input-group">
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span></span>
    </div>
    </div>
    <div class="form-group">
    <div class="input-group">
    <span></span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    </div>
    </div>
    </div>
    </div>
    </form>

    • Incluso no responder a la pregunta
  10. 0

    La combinación de dos entradas, donde el grupo de ocupar todo el ancho (100%), y el tamaño no es el 50% – 50%, no más de css. Me hizo muy bien en el siguiente código:

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
    <form>
    <div class="form-group">
    <label>Name</label>
    <div class="input-group" style="width:100%">
    <span class="input-group-btn" style="width:100px;">
    <select class="form-control">
    <option>Mr.</option>
    <option>Mrs.</option>
    <option>Dr</option>
    </select>
    </span>
    <input class="form-control" id="name" name="name" placeholder="Type your name" type="text">
    </div>
    </div>
    </form>
    </div>

  11. 0

    Con Bootstrap 4.1 me encontré con un ancho de solución por porcentaje:

    El siguiente ejemplo muestra una entrada de grupo con 4 Elementos: 1 texto de un 3 selecciona – trabajando bien:

    HTML:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <div class="input-group input-group-sm">
    <div class="input-group-prepend">
    <div class="input-group-text">TEXT:</div>
    </div>
    <select name="name1" id="name1" size="1" style="width:4%;" class="form-control">
    <option value="">option</option>
    <!-- snip -->
    </select>				
    <select name="name2" id="name2" size="1" style="width:60%;" class="form-control">
    <option value="">option</option>
    <!-- snip -->
    </select>					
    <select name="name3" id="name3" size="1" style="width:25%;" class="form-control">
    <option value="">option</option>
    <!-- snip -->
    </select>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here