Bootstrap - Comment faites glisser la barre de navigation de gauche, au lieu de haut

À ma connaissance, actuellement bootstrap prend en charge basculer la barre de navigation du haut. Comment puis-je le faire glisser à partir de la gauche lorsque la taille de l'écran est petit?

Pour exemple:- Voir les captures d'écran

Bootstrap - Comment faites glisser la barre de navigation de gauche, au lieu de haut

Dans la capture d'écran présentée ci-dessus, lorsque l'écran est redimensionné, la barre de navigation est activée et glisse vers le bas à partir du haut. J'ai plutôt envie que le navba devrait glisser à partir de la gauche. comment puis-je réaliser cette fonction dans le Bootstrap.

Actuellement, selon le code, la barre de navigation de diapositives à partir de la partie supérieure. Voici mon code.

<nav class="navbar navbar-site navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a href="{% url 'index' %} " class="navbar-brand logo logo-title">
            <span class="logo-icon"><i class="icon icon-search-1 ln-shadow-logo shape-0"></i> </span> <span>Companyname </span> </a> 
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                {% if user.is_authenticated %}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span>{{user.first_name}}</span> <i class="icon-user fa"></i> <i class=" icon-down-open-big fa"></i></a>
                        <ul class="dropdown-menu user-menu">
                            <li class="active"><a href="account-home.html"><i class="icon-home"></i> Personal Home </a></li>
                            <li><a href="statements.html"><i class=" icon-money "></i> Payment history </a></li>
                            <li><a href="{% url 'logout' %}"> <i class="glyphicon glyphicon-off"></i> Signout </a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a href="{% url 'login' %}">Login</a></li>
                    <li><a href="{% url 'signup' %}">Signup</a></li>
                {% endif %}
                <li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="{% url 'post_ad' %}">Post Free Add</a></li>
            </ul>
        </div>
    </div>
</nav>

OriginalL'auteur PythonEnthusiast | 2015-07-26