Bootstrap 4: responsive menu de barre de barre de navigation en haut

J'ai donc été à la recherche et à la recherche pour le guider dans cette avec en vain.

Fondamentalement, je veux juste avoir une barre latérale, mais quand l'écran est petit, alias smartphones taille de l'écran, il se transforme en une barre de navigation.

Mon code HTML de la barre de menu est: est-ce

<nav class="col-sm-3 ">
  <div class="col-sm-12" id="fixed-sidebar">
    <!-- <a href="index.html"><img id="home-logo" src="../media/logo-prueba.jpg" alt="Logo de Animanoir"></a>  -->
    <ul>
      <li class="fuente-fjalla ul-personalizada">Animación</li>
      <li class="fuente-fjalla ul-personalizada">Ilustración</li>
      <li class="fuente-fjalla ul-personalizada">Interacción</li>
      <br>
      <li class="fuente-fjalla ul-personalizada">Blog</li>
      <br>
      <li class="fuente-fjalla ul-personalizada"><a href="acerca.html">Acerca</a></li>
      <li class="fuente-fjalla ul-personalizada">Contacto</li>
    </ul>
  </div>
</nav>

Mon CSS:

#fixed-sidebar {
    position: fixed;
    max-width: 20%;
    color: white;
}

Je n'ai aucune idée de la façon d'obtenir que dans une barre de navigation. Tout ce que je sais est de savoir comment rendre la barre de navigation depuis le début, mais je ne veux pas que! Je ne veux pas de cette fantaisie d'animation-overlay-multicolore-accordéon-de toutes les choses, s'il vous plaît-

Merci 🙂

publier vos css merci
Je ne suis pas sûr si le css @media est bien ce que vous cherchez ou pas. Il vous permet d'afficher les différents CSS en fonction de la taille de l'écran. Par exemple, vous pourriez avoir un fond rouge sur un écran d'une largeur minimale de 1080, et un fond bleu sur un écran d'une largeur maximale de 780. Mais, pour obtenir de l'aide, j'ai besoin de vous pour poster votre code CSS.
Je pense qu'il n'y a pas besoin; je n'ai pas quelque chose de "différent" à partir d'un CSS pour le rendre réceptif (car je ne sais pas).
Ajouté le simple CSS pour #fixe la barre latérale

OriginalL'auteur dawn | 2018-01-27

  1. 28

    Il pourrait être fait dans le Bootstrap 4, en utilisant le réactif de colonnes de la grille. Une colonne de la barre de menu et l'autre pour le contenu principal.

    Bootstrap 4 barre latérale interrupteur en Haut barre de navigation sur mobile

    <div class="container-fluid h-100">
    <div class="row h-100">
        <aside class="col-12 col-md-2 p-0 bg-dark">
            <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start">
                <div class="collapse navbar-collapse">
                    <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between">
                        <li class="nav-item">
                            <a class="nav-link pl-0" href="#">Link</a>
                        </li>
                        ..
                    </ul>
                </div>
            </nav>
        </aside>
        <main class="col">
            ..
        </main>
    </div>
</div>

    Suppléant de la barre latérale de haut

    Fixe la barre latérale de haut

    Pour l'inverse (Top barre de navigation qui devient une barre latérale), qui peut être fait comme cet exemple

    Hey, grande solution. Où est-wrapper-ils définis? Je ne peux pas le trouver sur bootstrap4 documentation
    Merci.. wrapper n'est pas nécessaire
    Excellent point de départ pour une solution. Je trouve que la largeur de la barre de navigation lorsque verticale est proportionnelle à la largeur du navigateur, et le haut, à l'horizontale est proportionnelle à la hauteur de la fenêtre du navigateur. Est-il un moyen de l'éviter?
    J'ai peut-être mal à propos, mais quand vous utilisez le programme d'installation de lignes et de colonnes, alors vous ne pouvez pas faire de l'encadré "bâton" Si vous voulez que la barre latérale de défilement avec le contenu principal alors je crois que vous devez utiliser les balises div et faire un peu plus de personnalisation malheureusement. Jetez un oeil à cette bootstrapious.com/p/bootstrap-sidebar
    Je ne suis pas sûr de ce que tu veux dire. L'autre et fixe les exemples montrent un fixe latéral avec la grille.

    OriginalL'auteur Zim

  2. 1

    Vous pourriez tout aussi bien utiliser un menu /barre latérale, comme arrogant:
    https://chrisyee.ca/pushy/

    Plus de détails, s'il vous plaît :~)
    Voici une de nos sensible de menus et de barres de navigation qui a été faite avec arriviste. Vous utilisez pusy fondamentalement comme un modèle de démarrage & pouvez modifier en fonction de vos besoins. Il fonctionne avec Bootstrap pas de problèmes & l'image ci-dessous est en fait un bootstrap de site - i.imgur.com/1vtcwuf.gif la Honte mon commentaire a été voté en bas d'un peu de temps pour essayer d'aider quelqu'un. Cette négativité fait DONC sentir comme un mauvais endroit en essayant d'aider les autres 🙁
    Ne vous inquiétez pas, mon ami. Il est toujours utile, mais ce lieu est très strict de l'enfer, c'est pourquoi il a la qualité de l'information. Keep it up!

    OriginalL'auteur MWD

  3. 1

    Si ce n'est pas une bonne solution pour une raison quelconque, s'il vous plaît laissez-moi savoir. Il a bien fonctionné pour moi.

    Ce que j'ai fait est de cacher la barre latérale, puis faire apparaître la barre de navigation avec points d'arrêt

    @media screen and (max-width: 771px) {
    #fixed-sidebar {
        display: none;
    }
    #navbar-superior {
        display: block !important;
    }
}

    OriginalL'auteur dawn