Diviser en colonnes pour navbar Bootstrap

Question

Problème:

Je voudrais faire deux parties d'une barre de navigation dans Bootstrap 4 Beta être exactement la même taille et le reste au centre.

• La colonne 1 contient la marque.
• La colonne 2 contient des liens et le contenu doit être au centre.
• La colonne 3 contient un champ de recherche.

Les colonnes 1 et 3 doivent avoir exactement la même taille.

Il ne semble pas possible d'utiliser des colonnes dans la barre de navigation car le contenu ne s'ajuste pas en conséquence?

J'ai donc trouvé une solution différente, mais les colonnes 1 et 3 n'ont pas la même taille. Comment puis-je m'assurer que les colonnes 1 et 3 sont toujours les mêmes? Y at-il un moyen sans impliquer css personnalisé?

code HTML:

<!-- Navigation --> 
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> 
    <a href="#" class="navbar-brand">Logo</a> 
    <ul class="navbar-nav mx-auto"> 
    <li class="nav-item"><a href="#" class="nav-link">Link 1</a></li> 
    <li class="nav-item"><a href="#" class="nav-link">Link 2</a></li> 
    <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li> 
    <li class="nav-item"><a href="#" class="nav-link">Link 4</a></li> 
    </ul> 
    <form class="form-inline"> 
    <input type="text" class="form-control" placeholder="Search"> 
    </form> 
</nav> 

minimal Exemple de travail (MWF):

https://jsfiddle.net/6gc4guw7/

Answer 1

après avoir ajouté cdn
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js
ajouter col-xs-4 ou col -sm-4 ou col-md-4 ou col-lg-4 selon r dans la classe comme ci-dessous.

<!-- Navigation --> 
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> 
    <a href="#" class="col-xs-4 navbar-brand">Logo</a> 
    <ul class=" col-xs-4 navbar-nav mx-auto"> 
    <li class="nav-item"><a href="#" class="nav-link">Link 1</a></li> 
    <li class="nav-item"><a href="#" class="nav-link">Link 2</a></li> 
    <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li> 
    <li class="nav-item"><a href="#" class="nav-link">Link 4</a></li> 
    </ul> 
    <form class="form-inline"> 
    <input type="text" class="col-xs-4 form-control" placeholder="Search"> 
    </form> 
</nav>