WordPress : Comment implémenter le code du widget bootstrap pour l’en-tête personnalisé dans WordPress ?
Bootstrap : remplacer l’adresse par 3 logos (et les masquer sur mobile) 🏆
- 1· Objectif — Afficher BBB A+, Google Partner & cie à la place du bloc adresse, alignés horizontalement.
- 2· Structure recommandée — Une ligne Bootstrap
.rowcontenant 3 colonnes de même largeur (.col-md-4chacun). - 3· Code exemple :
<div class="address">
<div class="row">
<div class="col-4 d-none d-md-block">
<img src="bbb.png" class="img-fluid" alt="BBB A+ Logo">
</div>
<div class="col-4 d-none d-md-block">
<img src="google-partner.png" class="img-fluid" alt="Google Partner">
</div>
<div class="col-4 d-none d-md-block">
<img src="badge-3.png" class="img-fluid" alt="Votre badge">
</div>
</div>
</div>- 4· Masquer sur mobile — Les classes
d-none d-md-blockcachent chaque logo sur <576 px. - 5· Astuce alignement — Utilise
.img-fluidpour une largeur 100 %, ou ajoute.text-centersur lesdiv.col-4pour centrer.
➡️ Trois logos alignés, grille intacte (12 colonnes), et invisibles sur mobile grâce aux classes utilitaires Bootstrap.
Je travaille sur le site, je ne suis pas un pro du bootstrap. Voici l’en-tête que j’ai avec le thème :
Je souhaite remplacer l’adresse par 3 petites images png, à savoir BBB A + Accredited Business et Google Partner.
Comme ça : (Photoshopé)
Voici le code du widget :
<div class="col-xs-12 col-sm-9 col-lg-10 start-xs start-sm">
<aside id="text-3" class="widget header-right widget_text">
<div class="textwidget">
<div class="container extra-info">
<div class="row">
<div class="col-sm-5 col-md-5">
<i class="fa fa-phone"></i>
<div class="phone">
<h3>1-775-97-377</h3>
<span>info@thememove.com</span>
</div>
</div>
<div class="col-sm-7 col-md-6">
<i class="fa fa-home"></i>
<div class="address">
<h3>14 Tottenham Court Road</h3>
<span>London, England.</span>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
Pourriez-vous s’il vous plaît me faire savoir quels seront les bons tags et le bon code que je peux utiliser ? J’ai aussi un problème d’alignement ! col-md, je veux le cacher dans la version mobile (peut-être col-xs)
L’aide sera vraiment appréciée!
Solution n°1 trouvée
Essayez de remplacer le contenu de l’adresse par une autre ligne et les trois divs comme ci-dessous. N’oubliez pas que les colonnes doivent totaliser 12 pour que la grille fonctionne comme il se doit.
<div class="address">
<div class="row">
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
</div>
En ce qui concerne également le masquage des colonnes, je sais que bootstrap a différentes manières de le faire avec l’ajout de leurs classes, mais examine également les requêtes multimédias.
@media only screen and (max-width: 960px) {
.whatever {
display:none;
}
}
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
0 commentaire