twitter bootstrap - color - Grupo de entrada: dos entradas cercanas entre sí
span bootstrap 3 (9)
Casi nunca tiene sentido intuitivo tener dos entradas una al lado de la otra sin etiquetas. Aquí hay una solución con etiquetas mezcladas, que también funciona bastante bien con solo una pequeña modificación a los estilos existentes de Bootstrap.
Avance:
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/
¿Cómo puedo hacer que el grupo de entrada involucre 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, son horizontales en lugar de en línea
Crea una clase input-group-glue con esto:
.input-group-glue {
width: 0;
display: table-cell;
}
.input-group-glue + .form-control {
border-left: none;
}
<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>
Lo busqué unos minutos y no pude encontrar ningún código de trabajo.
¡Pero ahora finalmente lo hice! Echar 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; }
Mi solución no requiere css adicionales y funciona con cualquier combinación de input-addon, input-btn y form-control.
Simplemente usa clases de rutina de arranque preexistentes
<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>
No estaba contento con ninguna de las respuestas en esta página, así que jugueteé con esto yo mismo por un tiempo. Se me ocurrió lo siguiente
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'');
};
});
.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 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 establecer el ancho de las entradas individuales a su gusto. También un problema menor con los fragmentos anteriores es que la entrada parece incompleta cuando se enfoca o cuando no es válida. Lo arreglé con un código angular, pero puedes hacer esto fácilmente con jQuery o javascript nativo o lo que sea.
El código agrega la clase .focus a los div que contienen, por lo que puede obtener un índice z más alto que los demás cuando se enfoca la entrada.
Para mostrar más de una entrada en línea sin usar la clase " form-inline ", puede usar 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>
Luego, usando los selectores de CSS:
/* To remove space between text inputs */
.input-group > .input-group-btn:empty {
width: 0px;
}
Básicamente, debe insertar una etiqueta de span vacía con la clase " input-group-btn " entre las etiquetas de entrada .
Si desea ver más ejemplos de grupos de entrada y grupos de selección de arranque, eche un vistazo a esta URL: http://jsfiddle.net/vkhusnulina/gze0Lcm0
Si desea incluir un campo "Título" dentro de él que se puede seleccionar con el elemento HTML <select> , eso también es posible
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>
Suponiendo que los quiere uno 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>
Actualización Nr.1: ¿Desea usar .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>
La clase .input-group está ahí para extender las entradas con botones y .input-group (directamente adjuntos). También son posibles casillas de verificación o botones de radio. Sin embargo, no creo que funcione con dos campos de entrada.
Actualizar Nr. 2: con .form-horizontal la etiqueta .form-group básicamente se convierte en una etiqueta .row para que pueda usar las clases de columna 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>
solución de trabajo:
<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 hay un colapso de borde entre los dos campos de texto, pero se mantienen uno al lado del otro
Actualizar
gracias a Stalinko
Esta técnica permite pegar más de 2 entradas. El colapso del "margin-left: -1px" se logra usando "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>