我需要帮助将导航栏移动到右侧，因为该行没有使用父div(容器(的所有宽度。
此外，我需要使导航栏在较小的屏幕上可调整大小，当按钮出现以显示隐藏的导航栏时，单击它后，在右侧显示菜单(当前出现在中间(。
我已经尝试使用 bootstrap 5 提供的 pl-5 ml-5 类来移动导航栏，但似乎这些类并不能解决问题。
我已经检查过在这些行中添加更多内容(文本、链接、li 等(会变得更大。
网站的当前状态：https://demos.posicionart.com/silleri/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>向右移动并使其响应，因为这是我第一次使用这样的导航栏，而不是引导 4 提供的默认导航栏。
我们不能在任何地方使用相同的结构，所以只需将上面的代码替换为以下代码即可
.HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">
<ul class="top-navbar">
<li class=""><b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940</li>
<li class=""><b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i></li>
<li class=""><i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light pb-0">
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
和 CSS
.top-navbar {
list-style: none;
float: right;
}
.top-navbar li {
float: left;
}
有很多
方法可以实际实现这一点，我在行中添加了一个类并将 css 类添加为
.mobile-right {
justify-content: flex-end;
}
这是代码笔链接https://codepen.io/sohebm/pen/MdxYQx
但我建议您了解 Bootstrap 网格布局的工作原理和响应式实用程序
您可以使用 bootstrap 提供的 flex 帮助程序，特别是 justify-content-end 将菜单向右对齐，并使用 Align-items-end 将菜单向右对齐，并使用 ml-auto 类将导航栏切换器向右对齐。
见下文 ：
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Silieri</title>
<meta name="description" content="Prueba Desc">
<meta name="keywords" content="Prueba, Prueba2">
<meta name="author" content="Posicionart">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://demos.posicionart.com/silleri/images/logosilieri.png">
<script src="https://demos.posicionart.com/silleri/js/landing/jquery-3.4.1.min.js"></script>
<script src="https://demos.posicionart.com/silleri/js/landing/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/webfonts/all.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://demos.posicionart.com/silleri/css/landing/styles.css">
</head>
<body><nav class="navbar navbar-expand-lg navbar-light bg-light pb-0">
<div class="container">
<div class="row">
<div class="col-4 col-lg-4 ml-0">
<a class="navbar-brand" href="#">
<img src="images/landing/silieri-logo-head.png" class="d-inline-block align-top" alt="Imagen Logo Header Silieri">
</a>
</div>
<div class="col-8 col-lg-8">
<div class="row">
<p class="text-right navbar-header-footer">
<b class="welcome-title-header">Qro.</b> (442) 223 6825 | (442) 183 055 | (442) 183 1940 | <b class="welcome-title-header">León</b> (447) 432 0949 <i class="fab fa-facebook fa-lg"></i> <i class="fab fa-whatsapp fa-lg"></i> CONTÁCTANOS
</p>
</div>
<div class="row">
<button class="ml-auto navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav align-items-end">
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Proyectos</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Especiales</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Catálogo</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Guía</a>
</li>
<li class="nav-item pb-1 pt-1 pl-2 pr-2">
<a class="nav-link" href="#">Cotizador</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav><section id="welcome">
<div class="jumbotron rounded-0 home-banner"></div>
</section>
<section id="main" class="container">
<div class="container">
<p class="main-title text-center">Podemos amueblar desde una oficina hasta <b class="welcome-title-header">UN CORPORATIVO</b></p>
<hr class="my-5 welcome-hr">
<p class="text-justify mb-5 welcome-message center-justified">
En Sileri nos especializamos en crear ambientes fucionales, cómodos y durables cuyo desarrollo va desde la planeación del proyecto hasta la entrega e instalación del mobiliario.
</p>
<div class="row">
<div class="col-md-4">
<img src="images/landing/banner-home-ambientes.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Ambientes">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Ambientes</h3>
<p class="text-justify welcome-text-card">¿Tienes un proyecto grande en mente? Visita nuestra selección de ambientes para inspirarte.<a href="#"> VER MÁS</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-catalogo.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Cátalogo">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Ver</b> Catálogo</h3>
<p class="text-justify welcome-text-card">Encuentra piezas que funcionen, combinen y se adapten a tu proyecto y presupuesto.<a href="#"> VER MÁS</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<img src="images/landing/banner-home-asesoria.jpg" class="main-image mb-3 img-fluid" alt="Imagen de Asesorías">
<div class="row">
<div class="col-md-2 pad-mar-0">
<div class="vr"> </div>
</div>
<div class="col-md-10 pr-5">
<h3 class="upper-letters welcome-title-card"><b class="primary-color">Solicita</b> Asesoría</h3>
<p class="text-justify welcome-text-card">Si no sabes cuándo es el momento ideal para renovar un área de trabajo, toma el test y contáctanos.<a href="#"> VER MÁS</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="muebles" class="container">
<div class="container">
<div id="muebles-row" class="row pt-5 mt-5">
<div class="col-md-8 pr-0">
<h1 id="title-muebles" class="upper-letters main-title">Muebles Especiales</h1>
<hr class="muebles-hr">
<div class="container pl-0">
<p class="text-justify">Existen dentro de las empresas áreas que demandan soluciones específicas en cuestión de funcionalidad, diseño y estética; si necesitas una solución integral para tu proyecto, podemos ayudarte.</p>
</div>
<a id="btn-conoce-mas-1" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
<div class="col-md-4 pl-0">
<img src="images/landing/banner-home-muebles-especiales.jpg" class="muebles-image img-fluid" alt="Imagen Sección de Muebles">
<a id="btn-conoce-mas-2" class="mt-4 rounded-0 pl-5 pr-5 btn btn-dark upper-letters" href="#">Conoce <span class="primary-color">más</span></a>
</div>
</div>
</div>
</section>
<section id="testimonios" class="container">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-lg-10">
<img id="imagen-testimonios-1" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
</div>
<div class="col-lg-2">
<div class="vr-testimonios"> </div>
</div>
</div>
</div>
<div class="col-md-8">
<br>
<div class="container">
<h1 id="title-testimonios" class="upper-letters main-title">Testimonios</h1>
<img id="imagen-testimonios-2" class="mt-5 pt-5 testimonials-image img-fluid" src="images/landing/home-testimonio-am.png" alt="Imagen Sección Testimonios">
<blockquote class="blockquote">
<p class="text-justify text-testimonials">Después de trabajar con ellos en el equipamento de nuestro comedor ejecutivo y de las salas de juntas del corporativo, recomiendo apliamente a Silieri Koncept por su experiencia, profesionalismo y entusiasmo en el proyecto.</p>
<b>
<footer class="blockquote-footer">
Director de compras, <cite title="Source Title">AM Consultores</cite>
</footer>
</b>
</blockquote>
</div>
</div>
</div>
</div>
</section><br>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="left"><a href="#" class="upper-letters">Proyectos</a></li>
<li class="left"><a href="#" class="upper-letters">Muebles Especiales</a></li>
<li class="left"><a href="#" class="upper-letters">Guía</a></li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li class="center"><a href="#" class="upper-letters">Catálogo</a></li>
<li class="center"><a href="#">Mesas y escritorios</a></li>
<li class="center"><a href="#">Sillas y sofás</a></li>
<li class="center"><a href="#">Recepciones</a></li>
<li class="center"><a href="#">Áreas de Guardado</a></li>
<li class="center"><a href="#">Escolares y Capacitación</a></li>
<li class="center"><a href="#">Muros Móviles</a></li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<div class="vr-footer-1"> </div>
<ul>
<li><a href="#" class="upper-letters">Contacto</a></li>
<li>
<p>
Oficina Matriz <br>
B. Quitana 208 <br>
Col. Carretas <br>
C.P 76050 <br>
Querétaro, Qro. MX.
</p>
</li>
<li>(442) 223 6825</li>
<li>(442) 183 0555</li>
<li>(442) 183 1940</li>
<br>
<li>
<p>
Oficina León <br>
(442) 432 0949
</p>
</li>
</ul>
</div>
<div class="col-3 col-md-3">
<br>
<ul class="footer-icons pb-5">
<li id="li-icons" class="mr-3 ml-3"><i class="fab fa-facebook fa-3x"></i></li>
<li id="li-icons" class="mr-3 ml-3 pb-4"><i class="fab fa-whatsapp fa-3x"></i></li>
</ul>
<ul id="ul-brand" class="mt-4 pt-4">
<li class="upper-letters">Silieri Koncept</li>
<li>
<p>
Muebles de oficina <br>
& proyectos integrales
</p>
</li>
</ul>
</div>
</div>
</div>
<br><br><br><br>
<div class="second-footer">
<div class="container">
<div class="row">
<div class="col-3 col-md-3">
<img src="images/landing/silieri-logo-footer.png" class="d-inline-block align-top pt-2 pb-2" alt="Imagen Logo Footer Silieri">
</div>
<div class="col-9 col-md-9">
<p class="text-right mt-4 upper-letters">
2019 © Silieri Koncept. Todos los derechos reservados. Consulte nuestro <a href="#">aviso de privacidad</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>