【问题标题】:Resize navbar in smaller screens and move it to the right在较小的屏幕中调整导航栏的大小并将其移动到右侧
【发布时间】: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


【解决方案1】:

我们不能在任何地方都使用相同的结构,所以只需将上面的代码替换为以下代码

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;
    }

【讨论】:

    【解决方案2】:

    实际上有很多方法可以实现这一点,我在行中添加了一个类并将css类添加为

    .mobile-right {
       justify-content: flex-end;
    }
    

    这里是codepen链接 https://codepen.io/sohebm/pen/MdxYQx

    但我建议你,了解 Bootstrap 网格布局的工作原理和响应式实用程序

    【讨论】:

    • 但是导航栏下拉列表中的元素仍然在中心,我尝试将您使用的相同类放在这些元素上但没有解决问题:(感谢代码类的,它至少有助于移动按钮!
    • 您的问题在于您构建代码的方式。可折叠 div 位于 &lt;div class="col-8 col-lg-8"&gt; 中,因此如果您删除 col-8,您的问题将得到解决并添加 col-sm-12
    • 我把 col-sm-12 和它解决了移动设备上的问题,使 col 跳转到“下一行”以使用 12 的所有网格,但在桌面上导航栏仍然无论如何,在中心,谢谢你的帮助!真的很有帮助。
    【解决方案3】:

    您可以使用引导程序提供的 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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 &copy Silieri Koncept. Todos los derechos reservados. Consulte nuestro <a href="#">aviso de privacidad</a>
                        </p>  
                    </div>
                </div>
            </div>    
        </div>
    </footer>
    
    </body>
    </html>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-04-12
      • 2019-02-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多