Largeur des entrées sous forme en ligne - Bootstrap 4

Question

Bonjour, J'essaie de mettre en place une forme en ligne avec des entrées de différentes largeurs en utilisant Bootstrap 4. J'ai essayé les différentes options disponibles ici: http://v4-alpha.getbootstrap.com/components/forms/.

Ceci est aussi loin que je suis allé:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-1"> 
      <label for="exampleInputName2" class="col-form-label">Name</label> 
     </div> 
     <div class="col-xs-2"> 
      <input type="text" class="form-control" placeholder=".col-xs-2"> 
     </div> 
     <div class="col-xs-3"> 
      <input type="text" class="form-control" placeholder=".col-xs-3"> 
     </div> 
     <div class="col-xs-4"> 
      <input type="text" class="form-control" placeholder=".col-xs-4"> 
     </div> 
    </div> 
</div> 

Mais je n'utilise toutes les classes de forme ou les mots clés.

EDIT ------------------------ ----------------

Pour être plus précis, comment spécifieriez-vous les largeurs d'étiquettes et d'entrées dans cet exemple provenant du site Bootstrap 4?

<form class="form-inline"> 
    <div class="form-group"> 
    <label for="exampleInputName2">Name</label> 
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> 
    </div> 
    <div class="form-group"> 
    <label for="exampleInputEmail2">Email</label> 
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> 
    </div> 
    <button type="submit" class="btn btn-primary">Send invitation</button> 
</form> 

Tout bon exemple simple serait le bienvenu.

Merci

Sylvain

Answer 1

Voici un exemple simple. Enveloppez-le dans un élément de formulaire et vous pouvez ajouter différentes entrées. Mieux vaut conserver les classes col-xs-uniform afin qu'elles s'alignent correctement

Assurez-vous que vous avez ajouté le bootstrap css et js à votre site.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <form> 
 
    <div class="form-group row"> 
 
     <label for="name1" class="col-sm-2 col-form-label">Name</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="name1" placeholder=".col-sm-10"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name2" class="col-sm-2 col-form-label">Other Name</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="name2" placeholder=".col-sm-10"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name3" class="col-sm-2 col-form-label">Third Name</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" id="name3" placeholder=".col-sm-10"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <div class="offset-sm-2 col-sm-10"> 
 
     <button type="submit" class="btn btn-primary">Submit</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

Voir l'exemple ci-dessous, si vous souhaitez utiliser la grille d'amorçage v4 largeurs avec le form-inline

<form class="form-inline"> 
    <div class="form-group row"> 
    <div class="col-md-5"> 
     <p class="form-control-static">email@example.com</p> 
    </div> 
    <div class="col-md-5"> 
     <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> 
    </div> 
    <div class="col-md-2"> 
     <button type="submit" class="btn btn-primary">Confirm identity</button> 
    </div> 
    </div> 
</form> 

Vérifiez le violon pour plus de détails: https://jsfiddle.net/dx0dzaqj/1/