J'ai des problèmes sur la meilleure façon de commander des articles correctement pour ordinateur de bureau et mobile.

Sur le mode bureau que je souhaite avoir (qui fonctionne actuellement):

  1. recherche à gauche

    Cependant, pour le mobile, je souhaite avoir :

    • icône de hamburger dans la position par défaut sur la gauche, qui est actuellement
    • recherche sur la droite, ce qui est actuellement
    • la marque au centre, mais elle n'est pas centrée, quoi que je fasse.

Quelqu'un peut-il indiquer ce que je fais mal ici? J'utilise la commande flexible et les marges automatiques pour positionner les articles, mais la marque sur mobile refuse de se positionner au centre.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="d-flex flex-lg-fill">
    <form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>

    <a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a>
  </div>
  <div class="collapse navbar-collapse" id="collapse-nav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>

</nav>
0
Krys 18 mars 2019 à 07:43

2 réponses

Meilleure réponse

Le code ci-dessous fonctionne désormais sur mobile

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div><a class="navbar-brand ml-lg-auto order-lg-last" href="">Brand</a></div>
  <div class="d-flex flex-lg-fill">
    <form class="form-inline mr-lg-auto order-sm-last mr-sm-auto">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
  <div class="collapse navbar-collapse" id="collapse-nav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>

</nav>
1
Lucifer 18 mars 2019 à 04:52

J'ai simplement ajusté le navbar-brand en utilisant css au centre visible. Le formulaire de recherche descendra lorsque l'écran sera plus petit pour éviter tout chevauchement avec le logo. J'espère que cela fonctionnera pour vous. Si vous avez besoin d'aide supplémentaire, laissez votre commentaire ci-dessous.

.navbar-dark .navbar-brand {
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
}

@media (max-width: 659px) {
    .w-full {
        width: 100% !important;
    }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <form class="form-inline w-full mt-2 mt-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>

    <a class="navbar-brand mx-auto" href="">Brand</a>

    <div class="collapse navbar-collapse" id="collapse-nav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
    </div>

</nav>
0
Saravana 18 mars 2019 à 07:43