web-dev-qa-db-fra.com

Groupe d'entrées - deux entrées proches l'une de l'autre

Comment puis-je faire un groupe d'entrée implique deux entrées?

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

Cela ne fonctionne pas, ils sont horizontaux au lieu de inline

twitter-bootstraptwitter-bootstrap-3
56
UnknownError1337

En supposant que vous les vouliez côte à côte:

<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

Update Nr.1: Si vous souhaitez utiliser .input-group avec cet exemple:

<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 classe .input-group est là pour étendre les entrées avec des boutons et autres (directement attachés). Les cases à cocher ou les boutons radio sont également possibles. Je ne pense pas que cela fonctionne avec deux champs d'entrée cependant. 

Update Nr. 2: Avec .form-horizontal, la balise .form-group devient essentiellement une balise .row. Vous pouvez donc utiliser les classes de colonne telles que .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>

Mise à jour de JSFiddle avec les trois exemples

41
Alexander Rechsteiner

contournement de travail:

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

inconvénient: pas de réduction de la bordure entre les deux champs de texte, mais ils restent côte à côte.

http://jsfiddle.net/EfC26/

Mettre à jour 

grâce à Stalinko

Cette technique permet de coller plus de 2 entrées. La réduction des bordures est obtenue en utilisant "margin-left: -1px" (-2px pour la 3ème entrée et ainsi de suite)

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

103
devnull

Il n’est presque jamais logique d’avoir intuitivement deux entrées côte à côte sans étiquettes. Voici une solution avec des étiquettes mélangées, qui fonctionne également très bien avec juste une modification mineure aux styles Bootstrap existants.

Aperçu:enter image description here

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/

64
Anson Kao

Pour afficher plusieurs entrées en ligne sans à l'aide de la classe "form-inline", vous pouvez utiliser le code suivant:

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

Ensuite, en utilisant les sélecteurs CSS:

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

En gros, vous devez insérer une balise span vide avec la classe "input-group-btn" entre les balises input.

Si vous souhaitez voir plus d'exemples de groupes d'entrée et de groupes d'amorçage-sélection, consultez l'URL suivante: http://jsfiddle.net/vkhusnulina/gze0Lcm0

10
Valeria Khusnulina

Si vous souhaitez y inclure un champ "Titre" pouvant être sélectionné avec l'élément HTML <select>, cela est également possible.

APER&CCEDIL;U enter image description here

EXTRAIT DE CODE

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

Créez une classe input-group-glue avec ceci:

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

8
boskop

J'ai cherché cela quelques minutes et je n'ai trouvé aucun code fonctionnel.

Mais maintenant je l'ai finalement fait! Regarde:

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

Et 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/ )

7
Andrei Telteu

Je n’étais satisfait d’aucune des réponses de cette page, j’ai donc manipulé cela moi-même un moment. Je suis venu avec ce qui suit

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>

Avec cela, il est possible de régler la largeur des entrées individuelles à votre goût. Un autre problème mineur avec les extraits ci-dessus est que l'entrée semble incomplète lorsqu'elle est focalisée ou lorsqu'elle n'est pas valide. J'ai corrigé cela avec un code angulaire, mais vous pouvez le faire aussi facilement avec jQuery ou javascript natif ou autre.

Le code ajoute la classe .focus à la div qui le contient, de sorte qu'il puisse obtenir un indice z plus élevé que les autres lorsque l'entrée est focalisée.

2
Benne Otten

Ma solution ne nécessite aucun css supplémentaire et fonctionne avec n'importe quelle combinaison d'entrées-addon, input-btn et form-control . Elle utilise uniquement des classes de démarrage préexistantes 

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

Ce sera en ligne s'il y a de la place pour des écrans plus petits. 

Exemple complet (input-addon, input-btn et form-control.)

jsfiddle

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

2
TarranJones

Avec Bootstrap 4.1, j'ai trouvé une solution de largeur en pourcentage:

Ce qui suit montre un groupe d’entrée avec 4 éléments: 1 texte sur 3 sélectionnés - fonctionne bien:

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

0
DirkO

La combinaison de deux entrées, où le groupe occupe toute la largeur (100%) et dont la taille n'est pas comprise entre 50% et 50%, pas de css supplémentaire. Je l'ai bien fait avec le code suivant:

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

0
Boy Suro