Bonjour à tous,
J'ai un problème concernant la grille bootstrap utilisée dans mon site. Effectivement, j'utilise une grille bootstrap pour le contenu de ma page et une div pour mon header. J'ai externalisé mon header pour pouvoir fixer certains éléments présents à l'intérieur. Plus précisément, j'utilise des mediaqueries pour le comportement responsive de mon header et une grille bootstrap pour le comportement responsive du contenu de ma page.
Voici donc ce que je souhaiterai obtenir:
http://www.mediafire.com/view/r16qyc5dn7905uo/Structure_souhaite%CC%81e.png
et le code associé:
http://www.mediafire.com/view/ly15tfb2bspmeas/Code_Actuel.png
Voici ce que j'obtiens:
http://www.mediafire.com/view/q1axxdfre2kswym/Structure_Obtenue.png
Suggestion de code pour obtenir ce que je souhaite (Je soumets cette suggestion à votre regard expert):
http://www.mediafire.com/view/0ade3twgancm8d2/Suggestions_de_code.png
_____________________________________________________________________________________
Voici mon code HTML actuel (pour modification):
<body>
<div class="header">
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="col-sm-3">Offre 1</div>
<div class="col-sm-3">Offre 2</div>
<div class="col-sm-3">Offre 3</div>
<div class="col-sm-3">Offre 4</div>
</div>
</div>
</div>
</body>
Voici mon code CSS actuel associé (pour modification):
body {
padding:0;
margin:0;
border:0;
background-color:rgba(224,224,224,1.00);
}
.container-fluid {
display:block;
width:100%;
height:100%;
margin: none;
padding: none;
border: none;
}
.col-lg-6 {
display:block;
height: calc(100vh - 95px);
width:100%;
margin: none;
padding: none;
border: none;
color:rgba(217,217,217,1.00);
}
.col-sm-3 {
display:inline-block;
height: calc((100vh - 95px) / 2);
width:100%;
margin: none;
padding: none;
border: none;
color:rgba(167,167,167,1.00);
}
Merci d'avance pour vos expertises les plus éclairées !
J'ai un problème concernant la grille bootstrap utilisée dans mon site. Effectivement, j'utilise une grille bootstrap pour le contenu de ma page et une div pour mon header. J'ai externalisé mon header pour pouvoir fixer certains éléments présents à l'intérieur. Plus précisément, j'utilise des mediaqueries pour le comportement responsive de mon header et une grille bootstrap pour le comportement responsive du contenu de ma page.
Voici donc ce que je souhaiterai obtenir:
http://www.mediafire.com/view/r16qyc5dn7905uo/Structure_souhaite%CC%81e.png
et le code associé:
http://www.mediafire.com/view/ly15tfb2bspmeas/Code_Actuel.png
Voici ce que j'obtiens:
http://www.mediafire.com/view/q1axxdfre2kswym/Structure_Obtenue.png
Suggestion de code pour obtenir ce que je souhaite (Je soumets cette suggestion à votre regard expert):
http://www.mediafire.com/view/0ade3twgancm8d2/Suggestions_de_code.png
_____________________________________________________________________________________
Voici mon code HTML actuel (pour modification):
<body>
<div class="header">
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="col-sm-3">Offre 1</div>
<div class="col-sm-3">Offre 2</div>
<div class="col-sm-3">Offre 3</div>
<div class="col-sm-3">Offre 4</div>
</div>
</div>
</div>
</body>
Voici mon code CSS actuel associé (pour modification):
body {
padding:0;
margin:0;
border:0;
background-color:rgba(224,224,224,1.00);
}
.container-fluid {
display:block;
width:100%;
height:100%;
margin: none;
padding: none;
border: none;
}
.col-lg-6 {
display:block;
height: calc(100vh - 95px);
width:100%;
margin: none;
padding: none;
border: none;
color:rgba(217,217,217,1.00);
}
.col-sm-3 {
display:inline-block;
height: calc((100vh - 95px) / 2);
width:100%;
margin: none;
padding: none;
border: none;
color:rgba(167,167,167,1.00);
}
Merci d'avance pour vos expertises les plus éclairées !