<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OmniFood</title>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="vendors/css/style.css">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<nav class="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href="#">FOOD DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">HOW IT WORKS</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">OUR CITIES</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">SIGN UP</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
so my code is working but it is not coming in a single line which is supposed be want my nav bar elements on right in a single line but they are coming line by line
i tried to do it in css using display inline-block but still not working out
3 Réponses :
Ajouter Classe Flex-Row ON
Son amende fonctionnant, comme son réponse, donc je pense que vous utilisez de petits appareils, c'est pourquoi c'est en bloc si vous avez encore besoin d'une ligne d'addition de classe p> flex-rangée code> avec NAVBAR-NAV
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>OmniFood</title>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="vendors/css/style.css">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<section >
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href="#">FOOD DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">HOW IT WORKS</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">OUR CITIES</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">SIGN UP</a>
</li>
</ul>
</nav>
</div>
</section >
</body>
</html>
Ajouter Style pour la liste 'Affichage: Inline-Block' Ajoutez également CSS pour 'Navbar-Nav {Affichage: Inline-Block! IMPORTANT}'. J'espère que cela vous aidera.
p>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,900|Ubuntu&display=swap" rel="stylesheet">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="vendors/css/style.css">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/29ae7bcec9.js" crossorigin="anonymous"></script>
<!--bootstrap scripts-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link"href="#">FOOD DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">HOW IT WORKS</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">OUR CITIES</a>
</li>
<li class="nav-item">
<a class="nav-link"href="#">SIGN UP</a>
</li>
</ul>
</nav>
</div>