Bootstrap colums 1-2 zonder spacing

@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl

Rickert Bombaklats op 05/10/2015 16:39:48

@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl

Ik design bijna alles in de BS grid. Ook kom er aardig uit met de colums probeer niet veel op de spacing te zetten. Ik ben nu alles gebaseeerd op het LG-screen. Als je me zou willen uitleggen hoe ik nu goed alles kan aanpassen voor MD en S zou het super zijn.

Als het goed is heeft elke column een padding left en een padding right.
Er wordt gekeken of het de eerste of laatste column is. (:first-child of last-child).

Alles wat er tussen zit heeft dus links en rechts padding. (Geen idee hoeveel, maar ga uit van 40 px)

.col-lg-4:last-child {
padding-right: 20px;
}
.col-lg-4 {
padding: auto 0;
}
.col-lg-4:first-child {
padding-left: 20px;
}

<div id="mySelector">
	<div class="row">
		<div class="col-md-6">
		...
		</div>
		<div class="col-md-6">
		...
		</div>
	</div>
</div>

#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}

Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.

Eschwin Moerkerken op 06/10/2015 10:36:15

<div id="mySelector">
	<div class="row">
		<div class="col-md-6">
		...
		</div>
		<div class="col-md-6">
		...
		</div>
	</div>
</div>

#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}

Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.

Ik maak nu gebruik van alleen de col-LG om hem op de desktop goed te krijgen.
Stel dat ik een col-lg-12 heb. Kan ik deze dan voor de mobiel zo laten, of moet ik in dezelfde class een col-xs-12 meegeven?

Volgens mij kun je bij bootstrap werken van klein naar groot.
Wat je bij md opgeeft is ook geldig voor lg (tenzij het overruled wordt), wat je bij sm opgeeft is ok geldig voor md en lg, enz.

Jan, ik snap niet waar je heen wilt met je code of iets.
Normaal doe je met Bootstrap aangeven hoeveel kolommen je wilt hebben op een bepaalt formaat van het scherm.

col-lg-12 is 12 kolommen naast elkaar op een groot scherm
col-md-12 is 12 kolommen naast elkaar op een middel scherm

Als je nu met een mobiel of tablet naar de website zal gaan zullen de 12 kolommen onder elkaar weergegeven worden ivm het "mobile-first".

Als je op een mobiel ook naast elkaar wilt hebben zet je op dezelfde div col-xs-12, mits je wilt dan hij maar 6 kolommen naast elkaar is o.i.d dan geef je col-xs-6.

Na een paar keer vragen weet ik nog steeds niet wat Jan wilt bereiken...?

Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.

Als je hem alleen een col-lg-12 meegeeft, zal hij altijd 12 kolommen breed zijn op kleinere devices (dus MD, SM en XS). In jouw geval geef je hem 12 kolommen mee (100%) dus maakt het in dit geval niets uit.

Stel je hebt twee kolommen naast elkaar van col-lg-6 en je zou die op een kleiner scherm (laptop bijvoorbeeld) ook naast elkaar willen hebben (mits er ruimte is) dan zou je ook een col-md-6 moeten toekennen en zou je in principe de col-lg-6 kunnen weg laten.

Zoals Jan de Laet al zei, je kan van klein naar groot werken. Dus heb je iets kleins gespecificeerd dan zal de grote deze altijd overnemen.

Stel je maakt gebruik van een col-md-6 dan zal deze op zowel MD ans LG 6 kolommen zijn, daar onder (SM en XS) 12 kolommen (standaard).

[size=xsmall]Toevoeging op 06/10/2015 12:12:47:[/size]

Rickert Bombaklats op 06/10/2015 12:08:08

Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.

Deze kun je prima aanpassen. De 15 pixels per kolom die zij hanteren is standaard.
Als je precies weet wat er gebeurd als je ze aanpast en wat de .row dan doet dan zou je dit zonder problemen prima kunnen aanpassen als je meer ruimte nodig hebt.

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.

Eschwin Moerkerken op 06/10/2015 12:10:05

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.

.col-md-offset-1 haalt aan allebei de kanten 1 eraf.
Je houd dus 10 kolommen over.

@randy je weet kennelijk niet wat een offset inhoudt. Een offset betekent dat iets wordt overgeslagen. Dus er wordt een kolom over geslagen.

[size=xsmall]Toevoeging op 06/10/2015 13:14:50:[/size]

@Jan Graneker: http://codepen.io/anon/pen/dYWRbr