Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problemas al colapsar la barra de navegación en Bootstrap

Estas en el tema de Problemas al colapsar la barra de navegación en Bootstrap en el foro de Frameworks JS en Foros del Web. Hola amigas(os), Intento desarrollar una app en Angular integrando Bootstrap, pero me he liado con la barra de navegación. Esta se compone de tres partes ...
  #1 (permalink)  
Antiguo 14/11/2018, 07:18
 
Fecha de Ingreso: enero-2009
Mensajes: 173
Antigüedad: 9 años, 10 meses
Puntos: 1
Problemas al colapsar la barra de navegación en Bootstrap

Hola amigas(os),

Intento desarrollar una app en Angular integrando Bootstrap, pero me he liado con la barra de navegación. Esta se compone de tres partes (y para hacerlo en simple en esta petición de ayuda, sigo el código desde la misma página del bootstrap):

a) Navbar
b) en el div class="collapse navbar-collapse": home,

Lo que pasa es que al cambiar, disminuyendo, el tamaño de la ventana del browser (en app responsive), el div que contiene la barra de navegación aumenta su alto y el form para búsqueda, junto a su botón de imput se posicionan en una segunda linea abajo de los items link de la barra. Gracias por la ayuda que me puedan dar para solucionar esto.

El app.component.html:
Código HTML:
        <div class="row" id="header">

                <div class="col" style="background-color:#ea3030" ></div>

                            <div class="col-lg-8" style="background-color:#ea3030" id="text-header" >

                                    <h1 style="padding-left: 15px;color:white"> {{ title }} </h1>

                            </div>
        
                <div class="col" style="background-color:#ea3030" ></div>

        </div>
        <div class="row">

            <div class="col" style="background-color:rgb(158, 83, 86)" ></div>

                    <div class="col-lg-8" id="navbar-alone">
                            <app-bar-nav></app-bar-nav>
                    </div>

            <div class="col" style="background-color:rgb(158, 83, 86)" ></div>

        </div>

        <div class="row">
                <div id="content" class="col-lg-8 col-center">


                        <section id="main" class="col-lg-12">

                        <!--Componente actual-->
                        <h3>Texto principal</h3>

                        </section>

                        <footer id="footer" class="col-lg-8 col-center">
                        <p>App web para Proyecciones - Sebastián Carrasco</p>
                        </footer>
                </div>
        </div> 
El bar-nav.component.html:
Código HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light">



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <a class="navbar-brand" href="#">Navbar</a>
  
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0" style="color:white">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown_link</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown" id="Sebas">
            <a class="dropdown-item" href="#">Atributos</a>
            <a class="dropdown-item" href="#">Resúmenes ejecutivos</a>
            <a class="dropdown-item" href="#">Textos Nacionales</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Indicadores Resumen</a> 
          </div>
        </li>
          <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>

          <form class="form-inline my-2 my-lg-0">
              
            <!--  <div class="form-group"> -->
                <input class="form-control mr-sm-2" type="search" placeholder="Texto a buscar..." aria-label="Search">

                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Iniciar</button>
            <!--  </div> -->
                 
            </form>



  </nav> 
El código css:
Código HTML:
Ver original
  1. .bg-light {
  2.  
  3.     background-color: #9e5356 !important;
  4.  
  5. }
  6.  
  7. .navbar-brand {
  8.     display: inline-block;
  9.     padding-top: .3125rem;
  10.     padding-bottom: .3125rem;
  11.     margin-right: 1rem;
  12.     line-height: inherit;
  13.     white-space: nowrap;
  14.     font-size: 1rem;
  15.     padding-right: 10px;
  16.     padding-left: 10px;
  17.  
  18. }
  19.  
  20.  
  21. a.navbar-brand:hover{
  22.     text-decoration: none;
  23.     background-color: rgb(49, 224, 93); /* Cambia el color de fondo al item seleccionado */
  24.     border-radius: 4px;  /*redondea las esquinas*/
  25.  
  26.  
  27. }
  28.  
  29. #navbarSupportedContent ul li a:hover{
  30.     border-radius: 6px;  /*redondea las esquinas*/
  31.  
  32.     background-color: rgb(49, 224, 93); /* Cambia el color de fondo al item seleccionado */
  33.  
  34.  
  35. }
  36. .navbar-light .navbar-brand {
  37.  
  38.     color: white;
  39.  
  40. }
  41.  
  42. .navbar-expand-lg .navbar-nav .nav-link {
  43.  
  44.     padding-right: .5rem;
  45.     padding-left: .5rem;
  46.  
  47. }
  48. #navbarSupportedContent ul li a{
  49.  
  50.     /*color: white;*/
  51.  
  52.     margin: 0px;
  53.     display: block;
  54.     text-decoration: none;
  55.     color: #FFF;
  56.     padding-left: 10px;
  57.     padding-right: 10px;
  58.     border: 3px solid transparent;
  59.  
  60. }
  61.  
  62. .nav-link{
  63.     padding:0;
  64. }

Imágenes:

https://www.amazon.com/clouddrive/sh...if33oHNaPQyuNc

Última edición por sesebas; 14/11/2018 a las 07:43 Razón: Agregar código css e imagen



La zona horaria es GMT -6. Ahora son las 13:55.