0
votes

Position Logo au milieu dans Navar

Je me lance de positionner le logo au milieu de Navbar et que des éléments se répandent du logo à gauche et à droite. Je veux aussi pousser les boutons à la fin de la barre de NAV.

C'est l'idéal Positionnement Dans mon code, j'ai essayé de créer deux colonnes dans la barre de navigation. Avec une largeur de 80% de 80% qui stocke 5 éléments, et l'autre prenant une largeur de 20% pour les boutons à la fin. Je ne suis pas sûr qui est la meilleure façon de le faire. P>

<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
    <ul class=" col-sm-10 navbar-nav justify-content-center">
        <li class="nav-item"><a href="#" class="nav-link">Products</a></li>
        <li class="nav-item"><a href="#" class="nav-link">My Products</a></li>

        <li><img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
        <li class="nav-item"><a href="#" class="nav-link">About KLion</a></li>
        <li class="nav-item"><a href="#" class="nav-link">News & Updates</a></li>

    </ul>
    <ul class=" col-sm-1 navbar-nav justify-content-between py-3 ">

        <button type="button" class="btn">
            <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
        </button>
        <button type="button" class="btn">
            <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
        </button>
    </ul>

</nav>
.navbar-nav > li{
  margin-left: 130px;
}

angular html css bootstrap-4

0 commentaires

3 Réponses :

1
votes

J'espère que cela vous aidera xxx

merci

0 commentaires

0
votes

Vous pouvez essayer ceci, si vous vous attendez à quelque chose de similaire et positionnez-le dans la balise appropriée à l'intérieur du bloc de style à l'aide de la marge et ajustez la taille du bouton à l'aide du remplissage.

<html>
    <head></head>
<style>
    .navbar-nav > a{
        margin-left: 50px;
    }
    img{
        margin-left: 50px;
    }
</style>
    <body>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
            <div class=" col-sm-10 navbar-nav justify-content-center">
                <a href="#" class="nav-link">Products</a></li>
                <a href="#" class="nav-link">My Products</a></li>
                <img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
                <a href="#" class="nav-link">About KLion</a></li>
                <a href="#" class="nav-link">News & Updates</a></li>
                <button type="button" class="btn">
                    <img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
                </button>
                <button type="button" class="btn">
                    <img src="../../assets/shopping-cart@2x.png" alt="logo" style="width:20px; height:20px;">
                </button>
            </div>
        </nav>
    </body>
</html>

1 commentaires

Je n'ai pas remarqué que ... merci pour la modification @ rajat.gite

0
votes

.navbar{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  width:100%;
}
.navbar ul:first-child{
  margin-left:20%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  width:60%;
}
.navbar ul:last-child{
  width:20%;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
}
https://codepen.io/infasyskey/pen/jOEojEQ

0 commentaires