Je construis un petit site Web ( lien ) qui affiche une barre de recherche dans la barre de navigation. J'utilise BootsTrap 4 pour les commandes de barre de navigation et algolia lieux pour la recherche Bar HTML Élément d'entrée. Le problème est que je ne peux pas aligner la barre de recherche avec le bouton de recherche, même si j'utilise formulaire-inline . En outre, les résultats de la recherche affichés lors de la frappe quelque chose dans la barre de recherche sont coupés. 
3 Réponses :
<form class="form-inline my-2 my-lg-0">
<div class="input-group">
<input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-outline-light" type="submit">Search</button>
</div>
</div>
</form>
Merci. Savez-vous comment ajouter un peu d'espacement entre la barre de recherche et le bouton?
@Cesare, vous pouvez soit donner le bouton ml-3 (ou ml-2 - plus petit) ou donner le MR-3 (ou MR-2 - plus petit). En savoir plus sur Bootstrap's Utilitaires d'espacement ici . Mais j'irais avec la version entrée-groupe que je viens d'ajouter à la réponse.
J'accepterai à cause du CSS en haut, mais le HTML de votre réponse mise à jour ne corrige pas l'alignement de mon côté.
Montre-moi quel problème d'alignement que vous avez et je vais vous dire comment le réparer.
Je pense que vous avez oublié de fermer la balise de formulaire
J'ai mis à jour le site Web avec votre même code HTML exact, mais il apparaît asymétrique, je ne sais pas pourquoi
Vous devez envelopper le
Assurez-vous que le Aussi votre Affichage: Inline-Block . Et votre entrée a max-largeur: 100% au lieu de largeur: 100% .
.ap-Dropdown-menu n'est pas un Z-indexé correctement au-dessus de la carte.
Utilisation de bootstrap:
enveloppez votre devrait être quelque chose comme ceci:
et
où la recherche est et la touche avec et ajouter à
< SPAN> Classe MR-2 pour l'espace que vous souhaitez.
* Autre Votre code *
0 commentaires
