recherche Comment mettre un menu bootstrap à gauche?

[StayZz 8]

Bonjour, je cherche comment faire pour coller un menu bootstrap à gauche comme sur la photo,

 

Merci. 

Pour avoir accès à cette image, merci de vous connecter.

[Invité]

Salut,

 

Ton sujet qui se trouvait dans Divers Habbo > Aides et support, a été déplacé dans Développement > css.

 

Ceci est un message automatique.

[Invité]

Tape sur google, "template admin boostrap" tu retrouveras plusieurs templates de ce style

[StayZz 8]

Il y a 3 heures, Lucas Orsini a dit :

Tape sur google, "template admin boostrap" tu retrouveras plusieurs templates de ce style

Merci mais quand je veux prendre que le menu, je n'y arrive pas ..

[-Soft 3]

Alors perso je serait bien tenté de te dire d'utiliser la grille bootstrap avec les row et les col, cependant ca n'aura pas tout à fait l'effet escompté (les colonnes étant en position relative, la hauteur de ton menu sera celle de son contenu, à moins de lui donner une taille fixe en pixels, ce qui est très déconseillé).

Exemple :

<style>
    #mon-menu {
        background: red;
        height: 900px;
    }
    #mon-contenu {
        background: blue;
    }
</style>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3" id="mon-menu"> 
      Menu
    </div>
    <div class="col-md-9" id="mon-contenu">
      Contenu
      <div class="row">
        <div class="col-lg-6">
          Div de 6 colonnes
        </div>
        <div class="col-lg-6">
          Autre div de 6 colonnes
        </div>
      </div>
    </div>
  </div>
</div>

 

Sinon, d'après moi la facon la plus efficace, faire une div en position fixe, à 0px de la gauche de l'écran, et mettre une marge de la taille de ton menu à gauche du contenu (et dans ce cas pour le rendre responsive, tu vas devoir utiliser les media-queries, ce qui est un peu + chiant.)

Exemple :

    <style>
        #mon-menu {
            width: 300px;
            position: fixed;
            background: red;
            height: 100%;
            overflow: auto;
            left: 0;
        }
        #mon-contenu {
            margin-left: 300px;
            background: blue;
        }
    </style>
    <div id="mon-menu">
        Menu
    </div>
    <div id="mon-contenu">
        Contenu
    </div>

D'habitude je déconseille aux gens de mettre des div en position fixed ou absolute, (ca nuit à la responsivité), mais la je ne crois pas qu'il y ait de solutions plus propre que celle la

Bonne soirée

[StayZz 8]

up svp

[Nagasaki 117]

Salut

 

 

Ton sujet est-il résolu ?

[StayZz 8]

oui

 

[Nagasaki 117]

    Salut BartS ,
    Ton sujet a été déplacer pour une des deux raisons suivante :

-Ta demande a été résolu ou,

-Ton sujet se trouvait dans la mauvaise catégorie.

    
    Ceci est un message automatique.

[Narzo 759]

    Salut BartS ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.