J'ai un problème et je n'ai pas pu le résoudre. Comment afficher les icônes sociales une ligne dans le menu réduit? J'ai ajouté le code ci-dessous à mon fichier css et rien n'a changé? Une idée? Merci d'avance
.navbar-right li {
display: inline-block;
}Voici mon code navbar:
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js" type="text/javascript"></script>
</head>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light style="background-color: #ffffff;">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"></span>
<a class="navbar-brand d-none d-lg-inline-block" href="https://testsite.com">
<img src="images/logo.png" height="150" dir="ltr" alt="logo">
</a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="https://testsite.com">
<img src="images/logo.png" height="100" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-center" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="https://testsite.com" class="nav-link m-2 menu-item">Home</a>
</li>
<li class="nav-item">
<a href="https://testsite.com/about" class="nav-link m-2 menu-item">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.facebook.com/" target="_blank" class="nav-link"><i class="fa fa-facebook fa-lg"></i></a></li>
<li><a href="https://www.instagram.com/" target="_blank" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
<li><a href="https://twitter.com/" target="_blank" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li></ul>
</div>
</div>
</nav>2 réponses
Je vais le faire dans votre classe CSS
.navbar-right li {
display: flex;
flex-direction: row;
}vous pouvez simplement ajouter des noms de classe de bootstrap d-inline-flex flex-row à votre balise ul avec la classe navbar-nav navbar-right avec vos icônes sociales, ce sera comme:
<ul class="nav navbar-nav navbar-right d-inline-flex flex-row">
<li><a href="https://www.facebook.com/" target="_blank" class="nav-link"><i class="fa fa-facebook fa-lg"></i></a></li>
<li><a href="https://www.instagram.com/" target="_blank" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
<li><a href="https://twitter.com/" target="_blank" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li></ul>
si vous en avez besoin, vous pouvez même le limiter en largeur comme: d-sm-inline-flex et d-lg-flex par exemple
ou Vous pouvez donner un affichage CSS: display: inline-flex; et flex-direction: row; à votre ul
.navbar-right {
display: inline-flex;
flex-direction : row;
}
De nouvelles questions
html
HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].