¿Cómo hacer que el botón plegable aparezca solo en la vista móvil usando Bootstrap?

El botón plegable se utiliza para ocultar o mostrar la lista de contenidos al hacer clic en el botón. Al hacer clic en el botón plegable, se expande y muestra una lista de contenidos para seleccionar, que luego se asigna a un contenido específico.

El botón plegable en la vista móvil aparece solo en la pantalla de tamaño móvil y desaparece en los dispositivos de pantalla grande. 

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
  
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
  
    <!-- Bootstrap links -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <nav id="header-nav" 
        class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <span><b>GeeksforGeeks</b></span>
  
                <!-- Button to extend the  menu -->
                <button type="button" 
                    class="navbar-toggle collapsed" 
                    data-toggle="collapse"
                    data-target="#collapsable-nav" 
                    aria-expanded="false">
                    <span class="sr-only">
                        Toggle navigation
                    </span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
  
  
                <!--  Display content of 
                    collapse button  -->
                <div class="collapse navbar-collapsed" 
                    id="collapsable-nav">
                      
                    <ul id="nav-list" class="nav 
                        navbar-nav navbar-right">
                        <hr>
                        <li><a href="#c">C</a></li>
                        <li><a href="#b">C++</a></li>
                        <li><a href="#s">Java</a></li>
                        <li><a href="#s">Python</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</body>
  
</html>

Producción:

En pantalla grande/escritorio/pantalla portátil:

En pantalla pequeña/pantalla móvil:

Publicación traducida automáticamente

Artículo escrito por poojavichare1810 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *