1. #1
    Débutant
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 596
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 596
    Points : 800
    Points
    800

    Par défaut [Bootstrap] comment avoir une col avec une largeur fix et la deuxieme en %

    Bonjour,

    Généralement, je commence la squellet de mon site avec Layoutit.

    Dans mon cas de figure, j'ai deux colonne
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="container">
    <div class="row">
    <div class="col-md-6 col-img">
    <figure>
    <img src="img/img1.jpg" alt="" />
    <img src="img/img2.jpg" alt=""/>
    </figure>
    </div>
    <div class="col-md-6">
    </div>
    </div>

    J'ai ajouté une class col-img.

    Je dois faire en sorte que la colonne qui contient les images ait une largeur fixe, soit de 479px, qui correspond à la larger des images.

    j'ai donc ajouté ceci:

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    @media screen and (min-width: 1200px) {
    	figure.images img:first-child{
    		margin-bottom:60px;
    	}
    	.col-img{
    		width:487px;
    		border:1px solid #000000;
    	}
    }
     
    /* Medium devices (desktops, 992px and up) */
    @media screen and (min-width: 992px) and (max-width:1199px){
    	figure.images img:first-child{
    		margin-bottom:60px;
    	}
    	.col-img{
    		width:485px;
    		border:1px solid #ff22ff;
    	}
     
    }
    Ca ne marche pas très bien.
    Le problème est principalement sur la deuxième colonne, car "elle se déplace" sur la droite.... En fait elle n'arrive plus jusqu'à la bordure du container, ce qui dans un sens ne me surprend pas.

    J'aimerais bien savoir comment je peux faire en sorte que la colonne de gauche (px) (la premiere) prenne la largeur d'une image, et que la colonne de droite occupe l'espace restant (%) jusqu'à la bordure de son élément parent, tout en continuant d'utiliser bootstrap.

    Si non, comment me recommanderiez-vous de faire un site responsive avec une colonne fixe dans sa largeur?

    Milles mercis pour vos lumières
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    12 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 12 627
    Points : 25 380
    Points
    25 380

    Par défaut

    Bonjour,

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="container">
      <div class="row special-box">
        <div class="col-md-6 special-img">
          <figure>
            <img src="img/img1.jpg" alt="" />
            <img src="img/img2.jpg" alt="" />
          </figure>
        </div>
        <div class="col-md-6 special-txt">
          sdf gsdgfg sdfgsdfg sdfgs dgf
        </div>
      </div>
    </div>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .special-box {
      display: flex;
    }
    .special-box .special-img {
      flex:0 0 485px; width: 485px;
      border: 1px solid #ff22ff;
    }
    .special-box .special-img img {
      max-width: 100%;
    }
    .special-box .special-txt {
      flex:1 1 100%; width: auto;
      border: 1px solid #ff22ff;
    }
    A adapter, bien sûr.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Débutant
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 596
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 596
    Points : 800
    Points
    800

    Par défaut

    Ouha, merci jreaux62,
    Je vais essayé ceci ce soir.

    Merci et tout bonne soirée!!
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  4. #4
    Débutant
    Profil pro
    Inscrit en
    mai 2005
    Messages
    2 596
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : mai 2005
    Messages : 2 596
    Points : 800
    Points
    800

    Par défaut

    tip top, merci!!
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 24/02/2017, 12h03
  2. Réponses: 1
    Dernier message: 13/04/2015, 11h17
  3. [XL-2002] Macro de comparaison d'une cellule d'une feuille avec une cellule d'une autre feuille.
    Par steelydan dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 08/09/2010, 12h59
  4. Réponses: 4
    Dernier message: 15/10/2009, 13h33
  5. Réponses: 5
    Dernier message: 18/07/2006, 15h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo