[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:
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:
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
