J'ai un formulaire de recherche dans mon application qui utilise Bootstrap. C'est une forme verticale signifiant que les étiquettes sont au-dessus des contrôles d'entrée. Dans mon exemple, j'ai deux entrées puis un bouton "Rechercher". Le but est d'aligner verticalement le bouton avec les entrées.
Voici quelques balises pour commencer (avec Plunker - assurez-vous d'élargir suffisamment le volet de démonstration):
<div class="col-sm-4">
<div class="form-group">
<label> </label>
<div>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Comme prévu, car le contenu de la troisième colonne qui contient le bouton ne comprend pas un élément (ou .form-group d'ailleurs), le bouton sera aligné avec les libellés dans les deux premières colonnes en haut. p >
Une solution évidente serait de faire correspondre le balisage de la colonne du bouton aux deux autres, comme ceci:
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
Exiger tout ce balisage supplémentaire est cependant désagréable.
Existe-t-il une meilleure façon d'atteindre cet objectif?
3 Réponses :
Vous pouvez définir une classe pour ce bouton div et y ajouter du CSS comme ceci
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 button-class">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label> </label><div>
<button type="submit" class="btn btn-primary">Search</button>
</div></div>
</div>
</div>
</form>
</div>
</body>
</html>
.button-class{
margin-bottom: 1rem;
display: flex;
align-items: flex-end;
}
Voici la démo
J'espère que ça aide :)
Vous pouvez le faire en mettant align-items-end (qui est l'équivalent de align-items: flex-end ) dans la classe .row , et supprimez également les form-group s pour supprimer la marge afin que tout commence à la fin
Encore une chose, vous devez mettre align-items-end dans la ligne car row a un style de display: flex , c'est pourquoi il fonctionnera.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container" style="margin-top: 20px">
<form>
<div class="row align-items-end mb-2">
<div class="col-sm-4">
<div class="">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>
</div>
</body>
La meilleure approche que j'ai trouvée pour vos objectifs est d'utiliser la classe align- items-end en conjonction avec d-flex sur la colonne qui enveloppe le bouton. De plus, vous devrez mettre le bouton à l'intérieur du div form-group , car il ajoute des marges, en résumé, ce sera la structure qui enveloppe le bouton:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>EXEMPLE COMPLET:
<div class="col-sm-4 d-flex align-items-end">
<div class="form-group">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
Quelle version de Bootstrap utilisez-vous?