0
votes

Comment garder la largeur de la barre de navigation de la même manière et le faire un centre d'alignement

(la barre de navigation ressemblait à l'origine de ceci) Je fais un site Web, j'ai utilisé Bootstrap pour créer une barre NAV, si je souhaite garder la largeur de la barre Navère comme avant, comment Puis-je aligner tout le centre Navbar entier ?? J'ai essayé Aligner le centre et le centre textuel, mais ils ne fonctionnent pas ...

/*menu bar style*/
.menu{
    width:100%;
    position: relative;
    color: black;
}

.my-navbar{

    position: absolute;
    z-index:999;
    width: 90vw;
    height: 10vh;
    padding: 20px 20px 20px 20px;
    background-color: white;
    top:20px;
    box-shadow:0px 4px 15px rgba(0,0,0,0.4);
    z-index:999;
}
.navbar-brand img{
    position: relative;
    width: 10vw;
    height: 15vh;
    margin: 0;
    float: none;
}

html css navbar

2 commentaires

Comment ressemble la barre Navère avant?

Essayez d'utiliser la balise

3 Réponses :

0
votes

Essayez d'ajouter des classes "D-Flex Justify-Center-Center-Centre-Centre-Centre" Centre-Centre-Centre "à l'élément NAV.

1 commentaires

Et si lorsque vous ajoutez ces classes au parent div auprès des classes "Menu de conteneur-fluide"?

1
votes

Vous pouvez remplacer le CSS comme celui-ci cible le conteneur .Container-fluid.menu { Affichage: flex; Justify-Content: Centre; } code>

p>



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid menu">
    <nav class="navbar navbar-expand-lg navbar-light my-navbar">

        <a class="navbar-brand" href="#">
          <img src="https://cdn.pixabay.com/photo/2017/01/14/12/59/iceland-1979445_960_720.jpg"  alt="" loading="lazy">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                <a class="nav-link" href="#">About Us</a>
                </li>

                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Eastern Europe
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Croatia</a>
                    <a class="dropdown-item" href="#">Crezh</a>
                </div>
                </li>
            </ul>

        </div>
    </nav>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

0 commentaires

0
votes

Utiliser mx-auto code> au

  code>  xxx  pré>   p> 


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div class="container-fluid menu">
  <!-- Add mx-auto -->
  <nav class="navbar navbar-expand-lg navbar-light my-navbar mx-auto">

    <a class="navbar-brand" href="#">
      <img src="./assets/logo.png" alt="" loading="lazy">
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">About Us</a>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Eastern Europe
                </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Croatia</a>
            <a class="dropdown-item" href="#">Crezh</a>
          </div>
        </li>
      </ul>

    </div>
  </nav>
</div>

0 commentaires