Tijden veranderen
Bootstrap colums 1-2 zonder spacing
Ben nog bezig met bootstrap en zit met het volgende:
[Colum1][spacing][colum2]
Nu wil ik graag [Colum1] en [colum2] tegen elkaar aan zetten, dus zonder de spacing. Ik er een standaard code om de spacing te verwijderen tussen beide?
[colum1] [colum2 style="margin:0; padding:0;"]
Nu heb ik nog 20px als spacing ipv 40.
Gewijzigd op 05/10/2015 11:45:25 door Jan Graneker
Code (php)
1
2
3
2
3
.nospace {
margin: 0;
}
margin: 0;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">
<div class="col-lg-4 nospace">
<div style="height:552px; background-color:#77767b;">
<img src="images/gear_icon.png" class="img-responsive"/>
<div class="col-lg-11" style="margin-left:10px;">
<h1>Homepagina</h1>
<p>Dit is een tekst</p>
</div>
</div>
</div>
<div class="col-lg-8 nospace" >
<img src="images/homepage_img.jpg" class="img-responsive" alt="CNC machine" />
</div>
</div>
<div class="col-lg-4 nospace">
<div style="height:552px; background-color:#77767b;">
<img src="images/gear_icon.png" class="img-responsive"/>
<div class="col-lg-11" style="margin-left:10px;">
<h1>Homepagina</h1>
<p>Dit is een tekst</p>
</div>
</div>
</div>
<div class="col-lg-8 nospace" >
<img src="images/homepage_img.jpg" class="img-responsive" alt="CNC machine" />
</div>
</div>
De nospace wordt wel herkent, alleen gebeurd er niks.
Gewijzigd op 05/10/2015 11:50:10 door Jan Graneker
Ik wil graag de afbeelding etgen het [homepagina] blok plakken. Wat is de beste manier?
Gewijzigd op 05/10/2015 15:23:59 door Jan Graneker
Code (php)
1
2
3
2
3
.nospace {
padding: 0;
}
padding: 0;
}
Gewijzigd op 05/10/2015 15:17:20 door Ozzie PHP
Ozzie PHP op 05/10/2015 15:16:58:
Verander nospace maar eens in dit:
Code (php)
1
2
3
2
3
.nospace {
padding: 0;
}
padding: 0;
}
Bedankt Ozzie. Weet jij toevallig ook waarom margin:0 niet werkt en ik in plaats hiervan de padding moet gebruiken?
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 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.
Gewijzigd op 05/10/2015 17:03:41 door Jan Graneker
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;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="mySelector">
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
</div>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}
#mySelector .col-md-6:last-of-type {
padding-left:0;
}
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.
Gewijzigd op 06/10/2015 10:40:19 door Eschwin Moerkerken
Eschwin Moerkerken op 06/10/2015 10:36:15:
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="mySelector">
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
</div>
</div>
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}
#mySelector .col-md-6:last-of-type {
padding-left:0;
}
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?
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.
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.
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).
Toevoeging op 06/10/2015 12:12:47:
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.
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.
Toevoeging op 06/10/2015 13:14:50:
@Jan Graneker: http://codepen.io/anon/pen/dYWRbr