Garder certains éléments dans la barre de navigation Bootstrap de s'effondrer

Question

J'essaie de créer une barre de navigation Bootstrap avec les éléments nav sur la gauche, et les icônes de contact/sociaux sur la droite. Je voudrais que les éléments de navigation s'effondrent, mais les éléments de contact/sociaux ne s'effondrent pas. Ils devraient être là pour cliquer sur pour les utilisateurs mobiles.

J'ai regardé quelques réponses à des questions similaires, mais malheureusement, Bootstrap v4 n'est pas rétrocompatible, et les solutions ne fonctionnent plus.

Mon code semble assez simple. Si je mets les objets sociaux/contact dans leur propre div, en dehors de la div divapse, ils mettent en scène drôle. Cependant, si je les mets dans la div divapse, ils s'alignent très bien. Mais, ils s'effondrent, ce que je ne veux pas. J'ai essayé de jouer un peu avec les paramètres flex, mais cela ne faisait qu'empirer les choses.

Dans un monde idéal, en vue mobile, je n'aurais que les icônes de contact/social, et le bouton de menu hamburger sur la droite.

#phone-number { 
 
    padding: 0 1em; 
 
    font-weight: bold; 
 
} 
 

 
.navbar-right { 
 
    flex-direction: row; 
 
} 
 

 
@media (max-width: 767px) { 
 
    #phone-number { 
 
    display: none; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
    <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
    </div> 
 
    </div> 
 
    <div class="nav navbar-nav navbar-right"> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
    <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
</nav> 
 

 
<br/><br/><br/> 
 

 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
    <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
    </div> 
 
    <div class="nav navbar-nav navbar-right"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

Voici ma réponse espérons qu'il vous aide Merci de

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta content="width=device-width, initial-scale=1" name="viewport"> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
    <style> 
 
    .nav-colapse{float: left;flex-basis: 70% !important;} 
 
    #phone-number { 
 
     padding: 0 1em; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .navbar-right { 
 
     flex-direction: row; 
 
    } 
 
    
 
    @media (max-width: 767px){ 
 
     #phone-number { 
 
     display: none; 
 
     } 
 
\t .nav-colapse{flex-basis: 100% !important;} 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse nav-colapse" id="navbarTogglerDemo02"> 
 
     <div class="navbar-nav mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
     </div> 
 
    </div> 
 
    <div class="nav navbar-nav navbar-right nav-social"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
    </nav> 
 

 
<br/><br/><br/> 
 

 
    
 
    </nav> 
 
</body> 
 
</html>

je ne sais pas pourquoi il erreur montrant ici, mais son violon de contrôle fin de travail

  example here[https://jsfiddle.net/radiantahmed/q2yysw7u/][1] 

Answer 2

ajouter nav navbar-nav navbar-right après le bouton puis #navbarTogglerDemo02

violon travail https://jsfiddle.net/j2pwtj5x/

<style> 
 
    #phone-number { 
 
     padding: 0 1em; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .navbar-right { 
 
     flex-direction: row; 
 
    } 
 
    
 
    @media (max-width: 767px){ 
 
     #phone-number { 
 
     display: none; 
 
     } 
 
    } 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="nav navbar-nav navbar-right"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
     <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
     </div> 
 
    </div> 
 
    
 
    </nav> 
 

 
<br/><br/><br/> 
 

 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
 
    <a class="navbar-brand" href="#">Navbar</a> <button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button> 
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
     <div class="navbar-nav mr-auto mt-2 mt-lg-0"> 
 
     <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Disabled</a> 
 
     </div> 
 
     <div class="nav navbar-nav navbar-right"> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-envelope fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-phone fa-lg"></i><span id='phone-number'>509-123-4567</span></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-twitter color-twitter fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-facebook color-facebook fa-lg"></i></a> 
 
     <a class="nav-item nav-link" href="#"><i class="fa fa-linkedin color-linkedin fa-lg"></i></a> 
 
     </div> 
 
    </div> 
 
    </nav>