[Problème] colonnage avec les span de bootstrap dans un article

[romain69]

Bonjour,

si j'utilise les class bootstrap span1, span2 dans l'éditeur d'article (onglet code), cela fonctionne mais la mise en page est perturbée par la présence des boutons "suivants /précédents" d'articles, qui ne se placent pas sous le contenu de l'article, mais à coté. Du coup, le colonnage est flingué :-)
J'ai essayé sur template protostar et helium/gantry, même résultat.

Je pourrais désactiver les boutons, mais si j'ai envie de les garder et de ne pas utiliser de pagebuilder pour le colonnage au sein d'un d'article. Une idée du pourquoi du comment ?

code :

<div class="span2">
<h3>colonne 1</h3>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
</div>
<div class="span2">
<h3>colonne 2</h3>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte..</p>
</div>

Voir Fichier joint pour explicitation

[dolmenhir]

Salut,
Tu peux régler ça simplement en ajoutant un attribut "clear:both" à la classe du bloc ul qui contient les boutons de navigation

ul.pager.pagenav {
    clear: both;
}

Dol.

[dolmenhir]

euh, j'y pense... c'est pas obsolète chez bootstrap ces "span" ??
on en est à "col" (col-1, col-2...) chez bootstrap 4

https://getbootstrap.com/docs/4.4/layout/grid/

et "col-md-1", "col-md-2" chez bootstrap3

https://getbootstrap.com/docs/3.3/css/#grid

[lefabdu51]

@dol :non ce J3 est toujours avec boostrap 2 - d ou les span
span2 + span 2 = span4 hors il y a 12 parties dans un span bootstrap. Donc tes deux colonnes sont sur le premier tiers de largeur de ta page.

[dolmenhir]

@dol :non ce J3 est toujours avec boostrap 2 - d ou les span

OK, mais il suffit d'ajouter un lien (en meta) pour le bootstrap 3 ou même le 4, et le tour est joué

span2 + span 2 = span4 hors il y a 12 parties dans un span bootstrap. Donc tes deux colonnes sont sur le premier tiers de largeur de ta page.

C'est vrai, le compte n'est pas bon là

EDIT : avec bootstrap 4, tu mets juste "col" à chaque div dans un "row", et il détecte combien de col et adapte la taille automatiquement

[romain69]

Au fait merci Dolmehnir pour tes réponses (breton peut-être au vu du pseudo ? :-)

"mais il suffit d'ajouter un lien (en meta) pour le bootstrap 3 ou même le 4" => tu ajoutes une ligne dans le index.php au niveau de la déclaration B4 ? mais s'il y a une mise à jour Joomla! cela va s'effacer ? => faut il installer une extension ?

[dolmenhir]

Au fait merci Dolmehnir pour tes réponses (breton peut-être au vu du pseudo ? :-)?

Pas totalement breton, mais en terres celtes assurément

"mais il suffit d'ajouter un lien (en meta) pour le bootstrap 3 ou même le 4" => tu ajoutes une ligne dans le index.php au niveau de la déclaration B4 ? mais s'il y a une mise à jour Joomla! cela va s'effacer ? => faut il installer une extension ?

La plupart des frameworks de template de bon cru permettent d'ajouter du code dans le head.
Et si c'est pas le cas, ce n'est qu'une déclaration à copier/coller lors d'une màj si jamais ça saute.

Et mieux, le plug-in à tout faire de Lomart

https://up.lomart.fr/demo