Fixer hauteur colonnes avec Bootstrap

**Seeverine** · 21/08/2015, 11h54

Bonjour,

Comme indiqué dans le titre je cherche une solution svp pour fixer la hauteur de mes colonnes avec Bootstrap.

Le problème en fait est qu'elle ne contiennent pas toutes la même quantité de texte, je souhaite quand même qu'elles soient alignées.

Quelqu'un aurait une solution à me proposer ?

Merci d'avance

**Jacques Beauregard** · 21/08/2015, 13h27

Bonjour,

Pourrais-tu nous montrer ton code pour au moins voir la structure HTML de tes colonnes?
Merci

EDIT : en attendant ta sctructure : voici un exemple d'alignement de trois div à contenu différents, en fixant la hauteur en pixels :

https://jsfiddle.net/sdpppse1/

**Seeverine** · 21/08/2015, 13h57

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
  </head>
 
  <body>
	<div class="container">
 
			<div class="navbar navbar-default">
				<ul class="nav navbar-nav">
					<li><a>Premier</a></li>
					<li><a>Second</a></li>
					<li><a>Troisième</a></li>
					<li><a>Dernier</a></li>
				</ul>
			</div>
 
		<div class="row">
			<section class="col-lg-12">
			<p>
			Etiam convallis ex risus, nec ultrices quam venenatis dapibus. Pellentesque sit amet maximus nulla. Nunc nec dui quis eros congue convallis ac porta leo. Vivamus mollis, nisl a euismod condimentum, risus lacus posuere diam, vitae vestibulum arcu dolor sit amet sapien. Aenean imperdiet mauris massa, in iaculis tortor posuere eget. Etiam tincidunt, lorem in mattis sagittis, mauris tellus congue metus, eget tempus felis neque ac eros. Praesent sed luctus ex. Cras vitae libero tincidunt, vehicula velit nec, venenatis turpis.</section>
			</p>
 
			<article class="col-sm-4 col-lg-4">
			<p>
			Phasellus sollicitudin urna non ante rhoncus, aliquet ullamcorper lectus ultricies. Donec dapibus arcu nibh, at pellentesque metus vestibulum vel. Etiam quis est elementum, facilisis nisl vulputate, hendrerit libero. Sed laoreet euismod facilisis. Integer mattis arcu ex, eu blandit nunc rutrum in. In dapibus faucibus lorem in vestibulum. Vestibulum a dui sit amet urna tempor fermentum. Ut aliquam sapien posuere, sodales odio vitae, tempus velit. Donec auctor neque et ligula laoreet, eu vulputate tellus lobortis. Sed id massa sapien. Vivamus porta est sit amet viverra tincidunt. Quisque laoreet quam id elit venenatis facilisis. Donec convallis sodales mi, et elementum tortor tempor ut. Morbi molestie magna purus, ut elementum ante tempor ornare.</article>
			</p>
			<article class="col-sm-4 col-lg-4">
			<p>
			Maecenas ut turpis lorem. In dictum condimentum mauris in vestibulum. Cras rutrum mi tortor, eget ultrices eros euismod in. Phasellus accumsan elit tortor, et ultrices velit auctor sit amet. In tristique turpis mattis sollicitudin finibus. Donec in consequat eros. Curabitur magna mi, ornare ut felis eu, bibendum consequat justo. Quisque a dolor neque. Ut felis lectus, cursus a consectetur tempus, ullamcorper vitae ipsum. Donec quis nisi vitae sapien fringilla vestibulum. Aenean rutrum augue in vehicula pulvinar. Sed suscipit, mi eget fermentum condimentum, tellus tellus euismod arcu, id vehicula est neque eget ante. Phasellus nec nulla neque. Donec ac nibh a dui elementum rhoncus. Sed interdum nec lorem id venenatis.Donec ac nibh a dui elementum rhoncus. Sed interdum nec lorem id venenatis.</article>
			</p>
			<article class="col-sm-4 col-lg-4">
			<p>
			Etiam in bibendum erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras euismod velit nec est pretium, ac varius mi lacinia. Nam vitae dolor enim. Etiam sagittis dui non erat rhoncus blandit vitae in tortor. Curabitur aliquet mi justo, sit amet sagittis nibh dictum eu. Nam felis eros, eleifend quis elit ut, sagittis laoreet dui. Maecenas vel fermentum nibh.Nam felis eros, eleifend quis elit ut, sagittis laoreet dui. Maecenas vel fermentum nibh.</article>
			</p>
 
			<section class="col-sm-12 col-lg-12">
			<p>
			Sed id consequat erat. Vivamus vel consequat tellus. Aliquam sed pulvinar mauris, ut feugiat nulla. Etiam sit amet vehicula justo. Integer et scelerisque diam. Duis sit amet erat sem. Nam convallis tortor non enim feugiat dictum nec vel purus. Sed egestas elit non lobortis consectetur.</section>
			</p>
		</div>
 
		<footer class="row">
			<div class="col-lg-12">Cras rhoncus dui egestas aliquam efficitur. Nam orci enim, volutpat eu malesuada quis, luctus vitae ex. Sed vel imperdiet lectus. In vel efficitur mauris. Quisque eleifend, risus rhoncus molestie porttitor, enim nulla convallis sapien, a rhoncus nunc ligula sit amet metus. Aenean eget turpis nisi. Pellentesque et libero eget orci mollis commodo. Suspendisse aliquam ultrices pulvinar. Duis semper eleifend congue. Suspendisse a ipsum neque. Pellentesque sagittis mauris sed vestibulum consectetur.</div>
		</footer>
	</div>
  </body>
</html>

Voici mon code !

Invité · 21/08/2015, 16h04

Bonjour,
il manque le code de ton fichier style.css (ou un lien vers celui-ci s'il est en ligne).

N.B. Dans ton "exemple", tu n'as que 3 articles cote-à-cote.
C'est trop peu pour se faire une idée du problème...

(surtout sans avoir ton style personnalisé style.css)

1/ Solution 1 (déjà donnée) :
on impose/fixe la hauteur, et on ajoute overflow:hidden; ou overflow:auto; (si on veut afficher automatiquement les barres de scroll)

2/ Solution 2 (en jQuery) :
Voir un exemple d'utilisation : Box news responsive

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script><!-- initialisation jQuery -->

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ------------------------
// Egalisation des hauteurs de box
function sameH_article(id) {
	var Hmax = 0;
	$(id).css({ 'height':'auto' });
	$(id).each( function() {
		Hmax = Math.max( Math.ceil( $(this).height() ), Hmax ) + 10; // 10 : marge
	});
	$(id).css({ 'height':Hmax+'px' });
};
 
// ------------------------
$(window).on( 'load resize', function(){
	sameH_article('.col-sm-4.col-lg-4');
});
// ------------------------

A adapter : tester la largeur de fenêtre, notamment le changement d'affichage 3 cote-à-cote -> l'un sous l'autre.

**Seeverine** · 21/08/2015, 19h53

Le fichier style.css n'est pas important puisque je n'y ai encore rien écris.

Par contre j'ai essayé le code que vous m'avez laissé et il fonctionne à merveille, c'est exactement ce que je recherchais !
Lorsque j'ajoute les bordures de mes colonnes elles sont exactement à la même hauteur même si elles ne contiennent pas un volume de texte identique.

Je vous remercie beaucoup !

Fixer hauteur colonnes avec Bootstrap

Dimensionnement en CSS

Discussions similaires

Partager

Partager