Navbar (collapso) no está trabajando en Bootstrap 5

Estoy enfrentando un problema al intentar crear un menú sensible o botón desplegable con Bootstrap 5. Todo parece estar bien. El icono de navegación " ícono desplegable. Pero no funciona. Cuando hice clic en nav icono o dropdown botón, no dropdown menu Apears.

Quiero mencionar especialmente que también he incluido el jquery archivo. Pero no funcionó. ¿Puede alguien por favor decirme qué está pasando aquí?

Una última cosa, Me enfrenté a problemas graves con otros bootstrap clases como mr-auto,ml-auto etc. ¿Hay algún error o nuevas clases? bootstrap 5 ¿Para este tipo de trabajo?

Aquí está mi código:

html

    
        
        
        Bootstrap
        [email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />

Pregunta hecha hace 3 años, 4 meses, 29 días - Por javagiant

11 Respuestas:

  • El data-* atributos utilizados en Bootstrap 4 han sido reemplazados por data-bs-* dentro Bootstrap 5

    Demo

    As explicado en el docs, los atributos de datos para todos los plugins de JavaScript ahora están diseñados para ayudar a distinguir la funcionalidad de Bootstrap de terceros y su propio código. Esto significa cualquier componente de javascript (Collapse, Navbar, Carousel, Dropdown, Tabs, Modal, etc.) sólo funcionará usando data-bs-... atributos.

    Bootstrap 5 es un actualización general con cambios de ruptura. También Ve aquí. que ml-auto/mr-auto han cambiado ms-auto/me-auto.

    Respondida el Dec 17, 2020 a las 13:36 - por devepicenter

    Votos positivos: 0 | Votos negativos: 0

  • Asegúrese de que ha añadido jsDeliver CDN link de bootstrap homepage para Javascript y CSS ambos en la etiqueta principal.

    ** CSS only **
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

** JavaScript Bundle with Popper **

    Respondida el Dec 17, 2020 a las 13:44 - por scriptsphinx

    Votos positivos: 0 | Votos negativos: 0 

  •

    Has usado data-toggle este atributo utilizado en versiones antiguas Bootstrap mientras que en Bootstrap 5 usted necesita utilizar este atributo data-bs-toggle y otra cosa más importante es que usted ha hecho (aria-expanded="true").

    Respondida el Dec 17, 2020 a las 13:51 - por codecraftsman

    Votos positivos: 0 | Votos negativos: 0

  • yo también está enfrentando el mismo problema primero he cambiado data-target a data-bs-target y data-toggle a data-bs-toggle segundo he incluido bootstrap.bundle.min.js y cdn link de bootstrap plano. min.js añadir dos mismo problema de causa script

    ` 

        



    




`

    Respondida el Dec 17, 2020 a las 13:56 - por stackscripter

    Votos positivos: 0 | Votos negativos: 0

  • Para mí sólo resolver este problema añadiendo -bs a data-target y data-toggle

    Respondida el Dec 17, 2020 a las 14:01 - por scriptsorcererf493

    Votos positivos: 0 | Votos negativos: 0

  • Además de incluir el enlace JS en el cuerpo los botones y div tienen el mismo aria-control/data-bs-target e ID :

    Respondida el Dec 17, 2020 a las 14:06 - por techtrailblazer8d2c

    Votos positivos: 0 | Votos negativos: 0 

  • html

    
        
        
        Bootstrap
        [email protected]/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />

    Respondida el Dec 17, 2020 a las 14:16 - por scriptsphinx

    Votos positivos: 0 | Votos negativos: 0

  • Necesitas importar

    Respondida el Dec 17, 2020 a las 14:26 - por codejuggernaut

    Votos positivos: 0 | Votos negativos: 0

  • Estoy usando Vue 3 junto a BS - ambas versiones finales de 2023. Por alguna razón lo único que ha funcionado para mí, fue incluir la BS javascript biblioteca BOTH en main.js y enlazarlo index.html (sólo la biblioteca JS, referencia a la CSS sólo una vez, ya sea en main.js o index.html era suficiente.

     index.html 

...

...


    // main.js
...
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
...

    Respondida el Dec 17, 2020 a las 14:33 - por pixelpilot

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás enfrentando es que estás utilizando código de Bootstrap 4 dentro de un proyecto de Bootstrap 5. En Bootstrap 5, hubo algunos cambios en la forma en que se manejan los componentes, lo que puede estar causando que el menú desplegable no funcione correctamente.

    Para solucionar este problema, aquí hay algunos cambios que puedes realizar en tu código:

    • En lugar de usar `data-toggle="collapse"` y `data-target="navbar"`, utiliza las clases de Bootstrap 5 `data-bs-toggle="collapse"` y `data-bs-target="#navbar"`. Esto se debe a que en Bootstrap 5 se prefija el uso de `bs-` en los atributos de datos.
    • En lugar de usar la clase `navbar-collapse`, utiliza la clase `collapse` en el contenedor que se colapsará en la versión móvil.

    Aquí te dejo una versión modificada de tu código:

    ```html

    Bootstrap Respondida el Dec 18, 2020 a las 13:31 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema 1: Navbar colapsable no funciona

    El problema con el menú o botón desple gable es que falta el atributo aria-expanded="false" en el botón de alternancia. Este atributo indica el estado inicial del elemento colapsable, que debe establecerse en false para que esté inicialmente contraído.

    Solución:

    Agrega el atributo aria-expanded="false" al botón de alternancia:

    html

    Problema 2: Clases mr-auto y ml-auto no funcionando

    En Bootstrap 5, las clases mr-auto y ml-auto han sido reemplazadas por las clases de utilidad ms-auto y me-auto, que sirven para el mismo propósito.

    Solución:

    Reemplaza mr-auto con ms-auto y ml-auto con me-auto:

    html

    Problema 3: Asegurar que jQuery y Bootstrap estén cargados correctamente

    Verifica que hayas incluido correctamente los archivos jQuery y Bootstrap en tu página.

    Solución:

    Asegurate de tener las siguientes líneas en la sección head de tu documento HTML:

    html

    Nota:

    Asegurate de que las URL de los archivos de jQuery y Bootstrap sean correctas y que los archivos se estén cargando correctamente en tu navegador. Si tienes problemas con la carga de los archivos, verifica tu conexión a Internet o intenta borrar el cache y las cookies de tu navegador.

    Respondida el Dec 18, 2020 a las 13:45 - por Gemini

    Votos positivos: 0 | Votos negativos: 0