Ik heb een website met meerdere kolommen naast elkaar. In de kolommen zit een tekst en een afbeelding.
De teksten varieren van lengte, waardoor de kolommen niet even hoog. Hoe kan ik dit oplossen?
PHP Code:
<div class="row">
<?php $projects = array(); ?>
<?php foreach($projects AS $project): ?>
<div class="col-xs-12 col-sm-4">
<div class="project">
<a class="image" href="#" title=""><img class="img-responsive" src="" alt=""/></a>
<div class="text-left">
<h3>Titel</h3>
<p>Tekst...</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
- Bootstrap columns gelijke hoogte
-
30-05-2016, 21:45 #1
- Berichten
- 1.475
- Lid sinds
- 16 Jaar
Bootstrap columns gelijke hoogte
-
31-05-2016, 07:51 #2
- Berichten
- 1.290
- Lid sinds
- 12 Jaar
Re: Bootstrap columns gelijke hoogte
Javascript.
-
31-05-2016, 08:10 #3
- Berichten
- 2.689
- Lid sinds
- 14 Jaar
Re: Bootstrap columns gelijke hoogte
css min-height
-
31-05-2016, 08:22 #4
- Berichten
- 48
- Lid sinds
- 10 Jaar
Re: Bootstrap columns gelijke hoogte
<div class="col-xs-12 col-sm-4">
Je totale pagina breedte is "12", dus kolom breedte voor mobile wordt "col-xs-12",
voor tablet: col-sm-12,
voor laptop: col-md-12
en voor groot scherm: col-lg-12
Je vraag over tekst lengte, dit kan je inkorten door volgende te doen.
----------------
$jouwTekst = "Jouw tekst, bla bla bla";
$jouwTekst = strip_tags($jouwTekst);
if ($jouwTekst != "") $jouwTekst = substr($jouwTekst, 0, 65);
if (strlen($jouwTekst) > 65) $jouwTekst .= "...";
echo $jouwTekst;
----------------
Met bovenstaande kort je je tekst in tot maximaal 65 karakters.
Stel jouw tekst is langer als 65 karakters, dan wordt er "..." achter jouw tekst geschreven.
Wellicht ben je hiermee geholpen, succes
Laatst aangepast door Henry Vlake : 31-05-2016 om 08:28
-
31-05-2016, 09:35 #5
- Berichten
- 878
- Lid sinds
- 14 Jaar
Re: Bootstrap columns gelijke hoogte
Ligt eraan wat je wilt:
- heb je één afmeting waaraan ieder moet voldoen?
- wil je dat alle afmeting even lang worden als de langste?
Zonder bovenstaand kunnen we niet echt een goede richting geven.
-
31-05-2016, 09:44 #6
- Berichten
- 1.475
- Lid sinds
- 16 Jaar
Re: Bootstrap columns gelijke hoogte
Nee ik heb geen vaste afmeting en een min-height is ook niet makkelijk. De blokken zijn verspreid over meerdere rijen.
Ik wil dat alle blokken op dezelfde rij, dezelfde hoogte krijgen.
-
31-05-2016, 09:49 #7
- Berichten
- 878
- Lid sinds
- 14 Jaar
Re: Bootstrap columns gelijke hoogte
Dat is dan optie 2. Dat is vrij eenvoudig te regelen met javascript.
Voor iedere rij/row
- voor iedere column
- if(columnHeight > largestHeigh) set LargestHeigh = columnHeight
Bovenstaand gaat per rij kijken naar de grootste column. Vervolgens maak je nog een forEach loop over de columns en zet je de hoogte op de largestHeight.
Bovenstaand is natuurlijk geen codeer-taal maar meer de denkwijze.
-
31-05-2016, 10:00 #8
- Berichten
- 48
- Lid sinds
- 10 Jaar
Re: Bootstrap columns gelijke hoogte
<div class="col-xs-12 col-sm-4 this-height">
en in je css, bijv:
--------
.this-height{
min-height: 150px;
}
of
.this-height{
height: 150px;
}
--------
Met "min-height" kan het voorkomen dat de blokken niet allemaal even hoog zijn, dit is gebasseerd op je tekst lengte, verstandig is dan om te werken met "height"
Op deze manier krijg je mobiel maar 1 blok naast elkaar en alle andere daaronder "bron: col-xs-12".
En met tablet krijg je 4 blokken naast elkaar, zijn er meer dan komen die daaronder te staan "bron: col-sm-4".
En omdat je "col-md" en "col-lg" niet vermeld, zullen laptop en groot beeldscherm de instellingen pakken van tablet.
Denk wel aan je tekst lengte! Want met "height" geef je een vaste hoogte maat!
-
31-05-2016, 10:15 #9
- Berichten
- 463
- Lid sinds
- 14 Jaar
Re: Bootstrap columns gelijke hoogte
Wat je ook kunt doen met CSS is de style van bootstrap licht overschrijven.
De float van de col's uitzetten, hier display: table-cell; van maken.
En van de row een display: table;
De divjes funguren dan als een 'tabel' waardoor ze even hoog worden als de grootste in de rij.
Je zult dan wel even moeten kijken wat dit voor resultaat geeft bij het responsive stuk, maar dit kun je dan ook weer oplossen door hier een stukje custom CSS voor te schrijven.
-
31-05-2016, 10:17 #10
- Berichten
- 878
- Lid sinds
- 14 Jaar
Re: Bootstrap columns gelijke hoogte
Dit is niet anders op te lossen dan met javascript. Waarom?
Je weet immers de hoogte van de columns niet. Deze zijn - zoals je zelf zeg - altijd verschillend. De ene keer is een hoogte van 150px genoeg maar de volgende keer is dat veel te weinig.
Het kan wel met CSS opgelost worden. Dan moet je ervoor zorgen dat de hoogte van de tekst bijvoorbeeld niet groter is dan 150PX. Maar dan nog, de ene keer is dat genoeg, de volgende keer zie je een deel van de tekst niet.
Behalve als je de bootstrap CSS gaat overschrijven uitteraard!
-
31-05-2016, 12:15 #11gast127713 Guest
Re: Bootstrap columns gelijke hoogte
Kijk eens naar css flexbox
http://clearleft.com/thinks/270
-
31-05-2016, 13:10 #12
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: Bootstrap columns gelijke hoogte
Ja precies Leurs.
Ik snap niet waarom er zoveel JavaScript oplossingen komen en er vermeld wordt dat het met css niet mogelijk zou zijn. Flexbox is hier prima voor geschikt.
-
31-05-2016, 19:00 #13
- Berichten
- 1.475
- Lid sinds
- 16 Jaar
Re: Bootstrap columns gelijke hoogte
Een min-height of een height is geen optie. De volgende rij heeft waarschijnlijk een andere hoogte. Ik kan de teksten niet inkorten, omdat de teksten volledig getoond moeten worden. Verder worden de kolommen aangemaakt d.m.v. een PHP foreach loop. Daardoor wordt de rij niet netjes afgesloten en worden er meer kolommen (in een rij) geplaatst dan bootstrap eigenlijk toelaat.
De output zou er zo uit kunnen zien:
PHP Code:<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
...
</div>
PHP Code:<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="project">...</div>
</div>
...
</div>
In de kolom zit een div "project", met daarin een afbeelding en een tekst. De teksten variëren van lengte, waardoor de "project" div een verschillende hoogte heeft en ik juist wil dat ze dezelfde hoogte hebben.
Hoe kan ik dit oplossen?
-
31-05-2016, 19:08 #14
- Berichten
- 1.290
- Lid sinds
- 12 Jaar
Re: Bootstrap columns gelijke hoogte
Nou, door af te stappen van bootstrap, en zelf een paar CSS regels schrijft.
En dan display: table; en display: table-cell; voor de onderliggende divjes.
Of flexbox, alle antwoorden worden gegeven hierboven.
-
31-05-2016, 21:52 #15
- Berichten
- 1.344
- Lid sinds
- 17 Jaar
Re: Bootstrap columns gelijke hoogte
Kan alleen met jQuery, ook omdat het realtime responsive moet zijn.
Haal eerst alle .row op en tel deze, geef ze een unieke class .rij-1, .rij-2 ect..
Haal dan per rij-* de child div's op en dan de height ervan, zoek de hoogste height en geef alle child div's deze height.
klaar.
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic