【发布时间】:2019-06-04 08:04:41
【问题描述】:
我需要帮助将导航栏移到右侧,因为该行没有使用父 div(容器)的所有宽度。
我还需要在较小的屏幕上调整导航栏的大小,当按钮显示隐藏的导航栏时,单击它后,会在右侧显示菜单(当前显示在中间)。
我已经尝试使用 bootstrap 4 提供的 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>
我只想将导航栏向右移动并使其具有响应性,因为这是我第一次使用这样的导航栏,而不是 bootstrap 4 提供的默认导航栏。
【问题讨论】:
-
默认菜单从左侧放置,您可以尝试使用下一个引导程序 4 类 'd-flex, flex-row-reverce' 镜像默认 impl
-
我试过了,但它并没有改变太多:(导航栏仍然在中心,没有使用所有空间(宽度),即使行没有填充和边距
-
试试这个 W3 教程。我认为这将解决您的问题。 w3schools
标签: html css bootstrap-4 navbar