1485 sujets

Web Mobile et responsive web design

Association grille bootstrap + div externes à la grille

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 !
Désolé mais j'ai oublié mon col-lg-6 dans les images de ce que je souhaite et ce que j'ai obtenu. Il se situe comme mon code l'indique entre ma div container et mes div col-sm-3
Sujet clos
Aller à