У меня есть 4 колонки сетки, выполненные в Bootstrap 4. В версии Dekstop выглядит так:
Это прекрасно.
После этого он переходит на планшетверсия & есть вертикальный разрыв между первым и третьим столбцом.Вот картинка:
Мне нужно устранить вертикальный пробел между первым и третьим столбцами.Любая помощь будет очень признательна.Заранее спасибо!
Вот мой код:
<footer role="contentinfo" class="footer container pt-5 mt-5"> <div class="col col-lg-3 col-md-6 d-12 d-sm-12"> <h3 class="m-3 font-weight-bold">À propos</h3> <ul class="list-unstyled p-0"> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/propos-de-nous/portrait-du-ciusss-de-la-capitale-nationale">Portrait</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/clsc#nom=&service=&catservice=&ressource=216">Nous joindre</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/propos-de-nous/conseil-dadministration">Conseil d'administration</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/propos-de-nous/salle-de-presse">Salle de presse</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/propos-de-nous/le-code-dethique-vos-droits-nos-engagements">Code d'éthique</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/propos-de-nous/rapport-annuel">Rapport annuel</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/propos-de-nous/amelioration-continue">Amélioration continue</a></li> </ul> </div> <div class="col col-lg-3 col-md-6 d-12 d-sm-12"> <h3 class="m-3 font-weight-bold">Services</h3> <ul class="list-unstyled p-0"> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/en-cas-durgence">Urgence</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/consulter-un-medecin-ou-une-infirmiere-0">Consulter un médicin</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/situation-difficile-detresse">Situation difficile</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/vivre-en-sante">Vivre en santé</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/deficiences-et-handicaps">Déficiences</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/alcool-drogue-et-jeu">Alcool, drogue et jeu</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/famille-enfants-parents">Famille, enfants, parents</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/jeunesse">Jeunesse</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/aines-0">Ainés</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/services-psychosociaux-et-sante-mentale-0">Santé mentale</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/commentaire-plainte">Commentaire, plainte</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/propos-de-nous/le-code-dethique-vos-droits-nos-engagements">Code d'éthique</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/nos-services/banque-dinterpretes-de-la-capitale-nationale">Banque d'interprètes</a></li> </ul> </div> <div class="col col-lg-3 col-md-6 d-none d-12 d-sm-12"> <h3 class="m-3 font-weight-bold">Expertise et partenariat</h3> <ul class="list-unstyled p-0"> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/sante-publique">Santé publique</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/formation-reseau">Formation réseau</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/colloques-congres-et-conferences">Colloques et congrès</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/ordonnances-collectives-0">Ordonnances collectives</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/espace-medecine">Espace médecine</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/espace-pharmacie">Espace Pharmacie</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/espace-soins-infirmiers">Espace soins infirmiers</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/services-prehospitaliers-durgence">Services préhospitaliers</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/le-centre-dexcellence-sur-le-vieillissement-de-quebec">Centre sur le vieillissement</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/partenariat">Partenariat</a></li> <li class="m-3"><a href="https://www.ciusss-capitalenationale.gouv.qc.ca/expertise-et-partenariat/comites-des-usagers-et-comites-de-residents">Comités des usagers</a></li> </ul> </div> <div class="col col-lg-3 col-md-6 d-12 d-sm-12"> <h3 class="m-3 font-weight-bold">Recrutement</h3> <ul class="list-unstyled p-0"> <li class="m-3"><a href="http://localhost:8011/en/recrutement/trouver-un-emploi">Trouver un emploi</a></li> <li class="m-3"><a href="http://localhost:8011/en/recrutement/trouver-un-stage">Stage</a></li> <li class="m-3"><a href="http://localhost:8011/en/trouver-un-emploi/demande-de-stage">Nouveaux employés</a></li> <li class="m-3"><a href="http://localhost:8011/en/recrutement/section-employes">Section employés</a></li> <li class="m-3"><a href="http://localhost:8011/en/recrutement/benevolat">Bénévolat</a></li> <li class="m-3"><a href="http://localhost:8011/en/recrutement/suivez-nous">Suivez-nous</a></li> </ul> </div> </footer>