Bootstrap 4 Pied collant ne colle pas

Je ne sais pas vraiment pourquoi le pied collant ne fonctionne pas dans Bootstrap 4. J'ai un site TYPO3 dont je suis un débutant.Bootstrap 4 Pied collant ne colle pas

Le pied collant ne colle pas en bas de la page.

Voici une copie de la source de la page telle qu'elle a été rendue. J'ai fondamentalement copié le fichier html à partir du dossier bootstraps docs, puis je l'ai modifié et copié dans mon template TYPO3.

Si je remplis la page avec du contenu, le pied de page ne colle pas - Je dois faire défiler la page pour la voir.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 

 
<title>Landing Page</title> 
 
<meta name="generator" content="TYPO3 CMS"> 
 

 
<link rel="stylesheet" type="text/css" 
 
\t href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all"> 
 
<link rel="stylesheet" type="text/css" 
 
\t href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230" 
 
\t media="all"> 
 
<link rel="stylesheet" type="text/css" 
 
\t href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966" 
 
\t media="all"> 
 

 
<script 
 
\t src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465" 
 
\t type="text/javascript"></script> 
 
<script 
 
\t src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602" 
 
\t type="text/javascript"></script> 
 
<script 
 
\t src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311" 
 
\t type="text/javascript"></script> 
 

 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <div class="mt-1"> 
 
\t \t \t <h1>Sticky footer</h1> 
 
\t \t </div> 
 
\t \t <p class="lead">Pin a fixed-height footer to the bottom of the 
 
\t \t \t viewport in desktop browsers with this custom HTML and CSS.</p> 
 
\t \t <p> 
 
\t \t \t Use <a href="../sticky-footer-navbar">the sticky footer with a 
 
\t \t \t \t fixed navbar</a> if need be, too. 
 
\t \t </p> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col">1 of 3</div> 
 
\t \t \t <div class="col">1 of 3</div> 
 
\t \t \t <div class="col">1 of 3</div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <footer class="footer"> 
 
\t \t <div class="container"> 
 
\t \t \t <span class="text-muted">Place sticky footer content here.</span> 
 
\t \t </div> 
 
\t </footer> 
 
</body> 
 
</html>

Source

2017-10-13 Daryn

S'il vous plaît vérifier vos chemins de fichiers CSS ... – sajee

chemins de fichiers @sajee sont corrects. J'ai vérifié en allant voir la source -> puis en cliquant sur chacun pour voir s'il charge le texte et ils le font. – Daryn

Lorsque je vérifie l'extrait de conde fourni, aucun style ne s'applique au contenu HTML. – sajee

réussi à comprendre. Peut-être que j'ai un malentendu sur ce que "Sticky" est ou quelque chose, mais la solution était de changer absolu -> fixe dans le fichier css.

par exemple. de:

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    line-height: 60px; /* Vertically center the text there */ 
    background-color: #f5f5f5; 
}

à:

.footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    line-height: 60px; /* Vertically center the text there */ 
    background-color: #f5f5f5; 
}

Source

2017-10-13 05:33:08 Daryn

Bootstrap 4 Pied collant ne colle pas

Répondre

Questions connexes