Bootstrap 4 | Impossible de conserver un champ de recherche sur la même ligne avec les éléments d'une barre de navigation personnalisée

J'ai créé une barre de navigation personnalisée en utilisant la grille de Bootstrap 4. Cette barre de navigation est divisée en deux parties: la partie gauche contient les éléments de la barre de navigation et la partie droite contient une zone de recherche. Le problème est que la boîte de recherche ne reste pas dans la partie droite de ma barre de navigation, peu importe quoi. Il passe toujours sous les éléments de la barre de navigation (partie gauche).Bootstrap 4 | Impossible de conserver un champ de recherche sur la même ligne avec les éléments d'une barre de navigation personnalisée

Voici mon HTML & code CSS:

.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     </div> 
 
     <div class="custom-navbar-search col-4"> 
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Comment puis-je positionner correctement une boîte de recherche sur la même ligne avec les éléments de la barre de navigation?

P.S .: Il n'y a pas de balises autour de "l'entrée" parce que j'ai essayé avec eux et sans eux, les deux façons n'ont pas fonctionné, donc je n'ai pas changé de code depuis le dernier essai.

P.P.S .: J'ai cherché Google et Stackoverflow avant de poster ma propre question. Aucune des réponses proposées ne m'a été utile. La plupart des gens suggèrent que la barre de navigation a trop d'éléments et ne peut donc pas s'adapter au champ de recherche, mais je pense que c'est stupide parce que je l'ai essayé même avec seulement 2 éléments dans ma barre de navigation.

Source

2017-09-22 Dream

Est-ce ce que vous cherchez?

Si vous voulez avoir la barre de recherche tirée vers la droite, ajouter:

class="float-right"

.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Source

2017-09-22 12:00:44 Granny

Salut! Je le veux sur la droite. C'est pourquoi j'ai séparé la barre de navigation en deux colonnes, de sorte que la seconde puisse garder la boîte de recherche et la rendre plus facile à éloigner de la première colonne qui contient les objets. – Dream

@Dream J'ai édité mon espoir awnser qui aide – Granny

@Dream Je ne peux pas le tester parce que les fichiers bootstrap ne sont pas dans votre question, donc je dois compter sur d'autres questions posées pour obtenir qu'il soit tiré à droite. [Check this out] (https://stackoverflow.com/questions/42442323/bootstrap-4-alpha-6-col-align-right) – Granny

La zone de recherche ne reste pas sur la partie droite de vos liens parce que les deux Les boutons personnalisés de la barre de navigation et de la barre de navigation personnalisée sont des éléments de niveau bloc. Donc, ils ont tous deux tendance à s'organiser les uns sur les autres occupant toute la largeur de leur div parent qui est custom-navbar.

Vous devez les faire à la fois en ligne.

.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
    display:inline-block; 
 
} 
 

 
.custom-navbar-search { 
 
    display: inline-block; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     </div> 
 
     <div class="custom-navbar-search col-4"> 
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Ou vous pouvez simplement utiliser FlexBox qui vous donnera plus de contrôle sur votre barre de navigation.

.custom-navbar { 
 
    display:flex; 
 
    flex-flow: row nowrap; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 
    
 
.custom-navbar-buttons p { 
 
    display: inline; 
 
    color: black; 
 
    margin-right: 0.4rem; 
 
} 
 

 
.custom-navbar-buttons { 
 
    padding-top: 0.4rem; 
 
    padding-bottom: 0.4rem; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="custom-navbar col-12 bg-success"> 
 
     <div class="custom-navbar-buttons col-8"> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
      <p>Button</p> 
 
     </div> 
 
     <div class="custom-navbar-search col-4"> 
 
      <input type="text" name="search" placeholder="search this site"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

Source

2017-09-22 12:15:52 slumbergeist

Ceci est également un moyen de travail. Dans le cas où quelqu'un ne peut ou ne veut pas utiliser le premier, utilisez celui-ci. Merci. – Dream

Bootstrap 4 | Impossible de conserver un champ de recherche sur la même ligne avec les éléments d'une barre de navigation personnalisée

Répondre

Questions connexes