web-dev-qa-db-fra.com

Strange Bootstrap behavior - Affichage correct sur une page et non sur une autre

J'ai le code suivant dans un module placé dans le pied de page de mon site:

<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-5">
<p></p>
<a href="https://bestscottishcottages.co.uk/" target="_blank" rel="noopener"><img src="images/partner-logo-transparent.png" alt="partner logo transparent" width="175" height="145" style="display: block; margin-left: auto; margin-right: auto;" /></a>
<p></p>
</div>
<div class="col-md-7 col-sm-7">
<h3>Bill &amp; Sukie Barber</h3>
<p><span style="font-size: 14pt;"><a href="tel:+441450373424">{zen-phone}{/zen-phone}01450 373 424</a></span></p>
<p><span style="font-size: 14pt;"> <a href="mailto:[email protected]">{zen-envelope}{/zen-envelope}[email protected]</a></span></p>
<p><span style="font-size: 14pt;"> {zen-map-marker}{/zen-map-marker}Priestrig Croft,<br /> by Hawick<br /> TD9 7NT</span></p>
<div class="social">
<p><a href="https://www.facebook.com/Fiddle-Hill-Cottage-727153347486812/" target="_blank" rel="noopener">{zen-facebook-square}{/zen-facebook-square}</a><a href="https://www.instagram.com/fiddle_hill_cottage/" target="_blank" rel="noopener">{zen-instagram}{/zen-instagram}</a></p>
<p><a href="https://www.google.com/maps/dir/Current+Location/55.4408087,-2.8147109" target="_blank" rel="noopener" class="btn btn-green">Get directions</a></p>
</div>
</div>
</div>
</div>

Sur la page this , les informations sur l’image et l’adresse sont correctement affichées côte à côte sur un iPhone 6/7 de paysage, mais sur la page this , elles sont affichées les unes sur les autres. Les deux pages utilisent le même module pour afficher les informations. Toutefois, elles utilisent une variante différente du même modèle. Pour ma part, je ne peux pas sembler savoir ce qui cause la différence. Quelqu'un pourrait-il s'il vous plaît offrir des conseils?

Merci d'avance. Donna

joomla-3.xbootstrap
2
Dtorr1981

Sur la première page (racine), vous chargez Bootstrap 4 à partir de MaxCDN. Sur la deuxième page (disponibilité) vous chargez une version locale de Bootstrap 2 .

Vous chargez également le JS /media/jui/js/bootstrap.min.js sur la page de disponibilité.

Essayez d'inclure Bootstrap 4 sur la page de disponibilité. Cela devrait résoudre ce problème.

De plus, je cesserais de charger le fichier JS Bootstrap 2) sur la page racine. Vous n'avez pas besoin des versions 2 et 4.

2
D. Morell