Merci de vous connecter ou inscrire pour avoir accès à ce lien."> Merci de vous connecter ou inscrire pour avoir accès à ce lien."> Aller au contenu

Cloudfordream    Rétro Habbo
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions d'utilisation !
BartS

 recherche Comment mettre un menu bootstrap à gauche?

Messages recommandés

Donateur

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

 

Merci. :D

Merci de vous connecter ou inscrire pour avoir accès à ce lien.

Partager ce message


Lien à poster
Partager sur d’autres sites
Premium

Salut,

 

Ton sujet qui se trouvait dans Merci de vous connecter ou inscrire pour avoir accès à ce lien. > Merci de vous connecter ou inscrire pour avoir accès à ce lien. , a été déplacé dans Merci de vous connecter ou inscrire pour avoir accès à ce lien. > Merci de vous connecter ou inscrire pour avoir accès à ce lien. .

 

Ceci est un message automatique.

Partager ce message


Lien à poster
Partager sur d’autres sites
Premium

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

Partager ce message


Lien à poster
Partager sur d’autres sites
Donateur
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 ..

Partager ce message


Lien à poster
Partager sur d’autres sites

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

Partager ce message


Lien à poster
Partager sur d’autres sites
Donateur

up svp

Partager ce message


Lien à poster
Partager sur d’autres sites
Modérateur

Salut

 

 

Ton sujet est-il résolu ?

Partager ce message


Lien à poster
Partager sur d’autres sites
Donateur

oui :)

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Modérateur
    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.

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.

Bienvenue invité !

Inscrit-toi ou connecte-toi pour une navigation sans restriction.

×