Responsive Bootstrap grid combineren met een fixed grid

Responsive frameworks zoals Bootstrap of Foundation zijn erg populair. In bepaalde gevallen wil je een responsive grid combineren met een fixed grid. Dat wil zeggen dat je één kolom wilt laten mee schalen en een andere kolom een vaste breedte mee wilt geven. Hier zijn verschillende oplossingen voor. In deze blog wil ik graag de oplossing met jullie delen die voor mij het beste werkt. In dit geval ga ik uit van een responsive grid op basis van Bootstrap. Deze techniek kan echter voor elk framework worden toegepast.

Omdat het resonspive grid binnen Bootstrap standaard geen mogelijkheid biedt om fixed elementen te combineren met het responsive grid zullen we het grid moeten aanpassen. Om zoveel mogelijk in lijn met de bootstrap naamgeving te blijven geef ik de extra suffix -fixed voor de grid elementen. Dat ziet er als volgt uit:

<div class="row-fixed">
	<div class="col-md-8-fixed">
		<div class="content">Deze kolom is responsive en schaalt mee.</div>
	</div>

	<div class="col-md-4-fixed">
		<div class="sidebar">Deze kolom heeft een vaste breedte.</div>
	</div>
</div>

Vervolgens hebben we slechts een aantal regels CSS nodig:

.row-fixed .col-md-8-fixed {
	 float: left;

	 width: 100%;
}

.row-fixed .content {
	 margin-right: 320px;
}

.row-fixed .sidebar {
	 float: right;

	 margin-left: -300px;

	 width: 300px;
}