6 afbelding 4 wel met een offset 2 niet.
Is zit met het volgende problemen. Ik heb 6 afbeelding op een pagina deze zijn verdeelt in 2 rijen.
Deze hadden allemaal dezelfde grote namelijk: col-lg-4
Nu wil ik graag de afbeeldingen col-lg-3 hebben en hierbij maak ik gebruik van col-lg-offset-1 om ervoor te zorgen dat de tussen ruimte groter wordt.
Het probleem is dat ik bij foto 2 en 3 en 5 en 6 wel de offset wil toepassen, maar niet bij foto 1 en 3.
Dit is de code dit gebruikt wordt op alle 6 de afbeeldingen:
$images .= '<div class="col-xs-6 col-md-offset-1 col-md-3 homeImg">';
Wie heeft een goede oplossing?
Je kunt dan in CSS met :nth-child(3n+1) werken om foto 1, 4, 7 enz afwijkend op te maken.
.homeImg:nth-child(3n+1) {}
Huidige situatie:
homeimg
[col-md-4] [col-md-4] [col-md-4]
[col-md-4] [col-md-4] [col-md-4]
Hoe moet dit worden:
[col-md-3] [col-md-3 offset1] [col-md-3 offset1]
[col-md-3] [col-md-3 offset1] [col-md-3 offset1]
Toevoeging op 08/06/2016 14:18:46:
Door de
.col-md-offset-1 te veranderen naar 6% kom ik wel tot het gewenst resultaat, dit zou dan alleen moeten gelden voor de class homeImg.
Wat is legit?
Die kon je perfect gebruiken om de 1e, 4e, enz een afwijkende opmaak mee te geven.
[col-md-3 homeImg] [col-md-3 homeImg] [col-md-3 homeImg]
[col-md-3 homeImg] [col-md-3 homeImg] [col-md-3 homeImg]
.homeImg {..de offset settings..}
.homeImg:nth-child(3n+1) {.. de offset settings op std..}
Mocht dat niet lukken (de homeImg), dan kan je eventueel wel refereren naar een div die eromheen ligt.
<div class="homeImages">
[col-md-3] [col-md-3] [col-md-3]
[col-md-3] [col-md-3] [col-md-3]
</div>
met
.homeImages img {..de offset settings..}
.homeImages img:nth-of-type(3n+1) {.. de offset settings op std..}
Gewijzigd op 08/06/2016 14:26:27 door Jan de Laet
Is er een betere manier?
Toevoeging op 08/06/2016 14:28:18:
Bedankt Jan, ik ga jouw manier proberen toe te passen. Bedankt voor je tijd en moeite.