Dev Faq
0
votes

Impossible d'aligner le logo de marque, l'icône et le bouton de menu Hamburger pour les appareils mobiles

Je suis nouveau à bootstrap, alors essayez toujours de me faire la tête.

Ce que je voudrais réaliser est d'avoir le logo de marque aligné à gauche et d'avoir l'icône du téléphone et l'icône Hamburger Nav à droite. Cela devrait ressembler à ceci:

ne pas aligner correctement pour la vue mobile

Le code que j'utilise de manière incorrecte peut être vu ici:

https://www.codesply.com/go/rfshk3it8g

Comme vous pouvez le constater, actuellement sur la vue Smartphone, ils sont tous alignés à gauche.

Toute aide serait grandement appréciée. Merci.

v

0 commentaires

4 Réponses :

0
votes

J'ai mis l'icône et hamburger à l'intérieur d'une div et ajouté D-flex no-goutters code> des classes de bootstrap et ajouté ci-dessous CSS 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">

  <div class="row no-gutters brand-hamburger">
    <div class="col-sm">
      <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
        <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
      </a>
    </div>
    <div class="d-flex no-gutters">
      <div class="col-sm ml-auto">
        <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
          <i class="fas fa-phone fa-2x"></i>
        </a>
      </div>
      <div class="col-sm ml-auto">
        <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
          aria-label="Toggle navigation">
    				<i class="fas fa-bars  fa-2x"></i>
    			</button>
      </div>
    </div>
  </div>





  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Affiliations</a>
      </li>

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

<main role="main" class="container">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</main>

1 commentaires

Cela montrera le "A propos de nous", "Notre équipe", etc. en 2 lignes, vérifiez la vue complète de votre réponse.

1
votes

Pas besoin de la structure de la ligne-col. Il suffit d'utiliser simplement le gabarit fourni par Bootstrap pour créer une barre NAV, il doit fonctionner correctement, et parce que vous avez 2 boutons à droite, gardez-les dans un D-flex code> DIV.

Mise à jour de cette section dans Le code ci-dessous p> xxx pré>

p> 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
  <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
    <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
  </a>
  <div class="d-flex ml-auto">
    <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center; padding: 26px 0 0 ; margin:0; line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
      <i class="fas fa-phone fa-2x"></i>
    </a>
    <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0; padding: 0; margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
      aria-label="Toggle navigation">
            <i class="fas fa-bars  fa-2x"></i>
        </button>
  </div>
  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav ml-auto">

      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Our Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Affiliations</a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
      <br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</main>

1 commentaires

Merci Nandita. Oui, cela fonctionne bien et c'est ce que je voulais. J'ai choisi celui-ci sur les autres solutions que c'est plus facile à comprendre et à ma tâche, il sera plus facile de mettre en œuvre pour les autres ajouts que je dois faire. Merci à tous pour les réponses.

0
votes

Faire un parent divi à l'intérieur de cette divisez à la fois l'icône Utiliser l'affichage: Flex pour le parent DIV et dans la ligne DIV Donnez la largeur: 100% Ceci fonctionnera également pour un appareil mobile aussi 

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" style="padding:0px;margin:0;">
       <div class="row no-gutters" style="width: 100%;">
          <div class="col-sm">
             <a class="navbar-brand" href="#" style="padding:0px;margin:0;">
             <img src="https://certiport.pearsonvue.com/getattachment/Certifications/ESB/Certification/Learn/NFTE_logo_purple_orange.png?lang=en-US">
             </a>
          </div>
          <div class="mobile-device" style="display:flex">
             <div class="col-sm ml-auto">
                <a style="color:#333;height:92px;width:50px; background-color:#F9D049;text-align:center;padding:26px 0 0 ;margin:0;line-height:1;" href="tel:000-000-000" class="d-block d-md-none">
                <i class="fas fa-phone fa-2x"></i>
                </a>      
             </div>
             <div class="col-sm ml-auto">
                <button style="color:#fff;height:92px;width:50px; background-color:#F47227;border-radius:0;padding:0;margin:0;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars  fa-2x"></i>
                </button>
             </div>
          </div>
       </div>
       <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav ml-auto">
             <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Our Team</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
             </li>
             <li class="nav-item">
                <a class="nav-link" href="#">Affiliations</a>
             </li>
          </ul>
       </div>
    </nav>
    <main role="main" class="container">
       <div class="starter-template">
          <h1>Bootstrap starter template</h1>
          <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
       </div>
    </main>

0 commentaires
1
votes

OK, j'ai un peu changé votre HTML. Vous pouvez voir le code de travail ici: https://www.codesply.com/go/pafq52qluk

Ce que vous devez faire est juste de:

  1. Assurez-vous que la ligne reprend toute la largeur de son parent
  2. Modifiez le col-sm s sur col-auto
  3. Supprimer le ml-auto du dernier col
0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor