Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Design vierge à créer > 5 colonne dans bootstrap 4

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

5 colonne dans bootstrap 4

La question
Posté le 8 Février 2018 à 14:45
animal vapm

36 messages
Inscrit le 21/4/2016
Mon site
J'ai été contente d'apprendre l'arrivé de bootstrap 4 et du coup, je suis en train de modifier certains code qui ne me plaisait pas (surtout que je ne savait pas que vous étiez sous bootstrap a l'époque et est utilisé fexblox pour mon bloc de liens au fond noir et c'était pas très joli et catastrophique arrivé sur mobile). Il est important que je m'occupe maintenant de ces soucis d'adaptation d'écran car même si le site est réservé à des "vieux", il y en a sur mobile qui se plaigne de ne pas bien voir et maintenant des "jeunes" arrivent. :D

Mais je n'y parviens absolument pas. Je ne dois pas ajouter le lien de bootstrap dans head ? (mais je connais l'adresse du fichier, ou alors je mets celle qui est dans le site bootstrap)
J'essaie donc de faire 5 colonnes mais ça me centre tout au milieu même mes sauts à la ligne n'existe plus.

Adresse du site : http://les-fioretti-de-mon-enfance.wifeo.com/
   SCRIPT
<div class="container-fluid">
<div class="fond_noir">
<div class="row">
<div class="col"> </div>

<div class="col"><br />
<span class="bloc_liens">Rubriques</span><br />

<div class="liens"><a href="http://les-fioretti-de-mon-enfance.wifeo.com/">Accueil du site</a><br />
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/histoire.php">Histoire</a><br />
<br />
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/blog.php">Accueil du blog</a><br />
<br />
articles<br />
<img class="wifeomoduleexportable" nm="10-5-10-0-23237" src="http://www.wifeo.com/tool/modules_exportables/blog_une-categorie.png" /></div>

<div class="col"><br />
<span class="bloc_liens">Contact</span><br />

<div class="liens"><a href="http://les-fioretti-de-mon-enfance.wifeo.com/contact.php">formulaire de contact</a><br />
ou <a href="mailto:utahime@live.fr">utahime@live.fr</a><br />
ou sur <a href="https://www.facebook.com/doudouze.richelieu.7" target="_blank">Facebook</a></div>

<div class="col"><br />
<span class="bloc_liens">IMP Richelieu</span><br />
<iframe allowfullscreen="" frameborder="0" height="165" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10881.17087382285!2d0.323793!3d47.014859!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47fd12d489077d39%3A0x254bdb2885e3d03a!2s21+Grand+Rue%2C+37120+Richelieu!5e0!3m2!1sfr!2sfr!4v1515428329848" style="border:0" width="219"></iframe></div>

<div class="col"> </div>
</div>
</div>


J'ai modifier "row" ainsi (si je le fais pas c'est encore pire)
   SCRIPT
.row {
width: 100%;
margin-top: 0px;
margin-bottom: -20px;
margin-left: 0px;
margin-right: 0px;
padding: 20 0;
display: table;
text-align: center;
}


Ai-je fait un faute ou est-ce à cause du lien dans head qui n'est pas mis ?
Merci de votre aide.

 
Navigateur utilisé : Firefox

La réponse qui règle le problème
Posté le 8 Février 2018
ninja

1 messages
Inscrit le 8/2/2018
Bonjour,

Dans le code que vous avez partagé, vous avez oublié de fermer des <div> (2 sur les ".col" et celle sur le ".container-fluid") ! :D Le navigateur essaie de les fermer comme il le peut, du coup il y avait des colonnes dans des colonnes :/

Voici le code corrigé :
   SCRIPT

<div class="container-fluid">
<div class="fond_noir">
<div class="row">
<div class="col"> </div>

<div class="col"><br />
<span class="bloc_liens">Rubriques</span><br />

<div class="liens">
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/">Accueil du site</a><br />
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/histoire.php">Histoire</a><br />
<br />
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/blog.php">Accueil du blog</a><br />
<br />articles<br />
<img class="wifeomoduleexportable" nm="10-5-10-0-23237" src="http://www.wifeo.com/tool/modules_exportables/blog_une-categorie.png" />
</div>
</div>

<div class="col">
<br />
<span class="bloc_liens">Contact</span>
<br />

<div class="liens">
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/contact.php">formulaire de contact</a>
<br />
ou <a href="mailto:utahime@live.fr">utahime@live.fr</a>
<br />
ou sur <a href="https://www.facebook.com/doudouze.richelieu.7" target="_blank">Facebook</a>
</div>
</div>

<div class="col">
<br />
<span class="bloc_liens">IMP Richelieu</span><br />
<iframe allowfullscreen="" frameborder="0" height="165" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10881.17087382285!2d0.323793!3d47.014859!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47fd12d489077d39%3A0x254bdb2885e3d03a!2s21+Grand+Rue%2C+37120+Richelieu!5e0!3m2!1sfr!2sfr!4v1515428329848" style="border:0" width="219"></iframe>
</div>

<div class="col"> </div>
</div>
</div>
</div>


Voila, vous pouvez maintenant enlever les modifications sur la class ".row" car sinon ça ne marche pas.
 
Navigateur utilisé : Chrome
 
Dernière modification du message le 8/2/2018 à 17:17:46.


 
Posté le 8 Février 2018 à 17:17
ninja

1 messages
Inscrit le 8/2/2018
Bonjour,

Dans le code que vous avez partagé, vous avez oublié de fermer des <div> (2 sur les ".col" et celle sur le ".container-fluid") ! :D Le navigateur essaie de les fermer comme il le peut, du coup il y avait des colonnes dans des colonnes :/

Voici le code corrigé :
   SCRIPT

<div class="container-fluid">
<div class="fond_noir">
<div class="row">
<div class="col"> </div>

<div class="col"><br />
<span class="bloc_liens">Rubriques</span><br />

<div class="liens">
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/">Accueil du site</a><br />
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/histoire.php">Histoire</a><br />
<br />
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/blog.php">Accueil du blog</a><br />
<br />articles<br />
<img class="wifeomoduleexportable" nm="10-5-10-0-23237" src="http://www.wifeo.com/tool/modules_exportables/blog_une-categorie.png" />
</div>
</div>

<div class="col">
<br />
<span class="bloc_liens">Contact</span>
<br />

<div class="liens">
<a href="http://les-fioretti-de-mon-enfance.wifeo.com/contact.php">formulaire de contact</a>
<br />
ou <a href="mailto:utahime@live.fr">utahime@live.fr</a>
<br />
ou sur <a href="https://www.facebook.com/doudouze.richelieu.7" target="_blank">Facebook</a>
</div>
</div>

<div class="col">
<br />
<span class="bloc_liens">IMP Richelieu</span><br />
<iframe allowfullscreen="" frameborder="0" height="165" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10881.17087382285!2d0.323793!3d47.014859!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47fd12d489077d39%3A0x254bdb2885e3d03a!2s21+Grand+Rue%2C+37120+Richelieu!5e0!3m2!1sfr!2sfr!4v1515428329848" style="border:0" width="219"></iframe>
</div>

<div class="col"> </div>
</div>
</div>
</div>


Voila, vous pouvez maintenant enlever les modifications sur la class ".row" car sinon ça ne marche pas.

 
Navigateur utilisé : Chrome
 
Dernière modification du message le 8/2/2018 à 17:17:46.

 
Posté le 8 Février 2018 à 19:06
gabriel-support

Bonjour,

Bootstrap 4 est effectivement présent dans vos pages.

Par contre, petite subtilité, cette version de bootstrap pour Wifeo est sur 24 colonnes et non sur 12. Cela permet plus de "subtilité" dans les largeurs.

 
Navigateur utilisé : Chrome

 
Posté le 8 Février 2018 à 19:23
animal vapm

36 messages
Inscrit le 21/4/2016
Mon site
Merci pour la correction ça fonctionnera peut-être mieux ainsi

Super, merci pour l'infos des 24 colonnes, je retravaillerai donc sur cette base.

 
Navigateur utilisé : Firefox
 
Posté le 8 Février 2018 à 19:35
A oui effectivement en fermant les div c'est mieux.

Encore que les liens de chaque colonne se collent les uns aux autres et je dois aussi voir pour la tille des polices, les espaces entre lignes etc... mais je ferai demain.

 
Navigateur utilisé : Firefox

 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES