0

introducir la descripción de la imagen aquí Lo que me ocurre es que al reducir el tamaño de pantalla o ponerlo en modo móvil, la barra lateral desaparece y no se ve ni se puede seleccionar nada y querría que se colapsara...

<div class="container-fluid">
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="index.html">
                  <span data-feather="alert-triangle"></span> Incidencias <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="temperatures.html">
                  <span data-feather="thermometer"></span> Temperaturas
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="jsp/weather.jsp">
                  <span data-feather="cloud"></span> El tiempo
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
3
  • Estimado, de que barra lateral estamos hablando? podrías agregar por favor un snippet con tu código y unas capturas de tus resultados para ayudarte?
    – harifo
    Commented el 29 ago. 2019 a las 18:02
  • 4
    Te falta el botón con la clase .navbar-toggler para colapsar el menú. Mira la documentación de dicho componente aquí, si tienes alguna duda puedes editar tu pregunta mostrando el avance que has logrado. Commented el 29 ago. 2019 a las 18:09
  • Los avances son nulos. Commented el 29 ago. 2019 a las 19:01

1 respuesta 1

0

basado en el codigo que subiste he agregado lo requerido para que el menú se transforme en un icono hamburger en resoluciones menores.

El nuevo codigo es el siguiente:

<div class="container">
    <div class="row d-flex justify-content-center">

        <div class="sidebar1 col-3 h-100">
            <nav class="navbar navbar-expand-lg navbar-light " style="border: 1px solid red;">

                <button class="boton navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="menues collapse navbar-collapse" id="navbarTogglerDemo01">

                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="index.html">
                                <span data-feather="alert-triangle"></span> Incidencias <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="temperatures.html">
                                <span data-feather="thermometer"></span> Temperaturas
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="jsp/weather.jsp">
                                <span data-feather="cloud"></span> El tiempo
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <div class="col-9 bg warning">
            <img class="img-fluid rounded" src="https://dummyimage.com/1000x400/000/fff" alt="">
        </div>
    </div>
</div>

puedes ver el codigo corriendo en codeply.

Nota: he incluido imagen de prueba para ocupar el espacio del body y un borde rojo para indicar el sidebar.

Suerte.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.