[Bootstrap] comment avoir une col avec une largeur fix et la deuxieme en %

**pierrot10** · 13/03/2018, 18h58

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

Invité · 13/03/2018, 19h08

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.