Bootstrap 4: Fußzeile nicht ganz unten

Lesezeit: 7 Minuten

Bootstrap 4 Fuszeile nicht ganz unten
Nackte Python

Ich weiß, dass diese Frage wahrscheinlich einige hundert Mal gestellt wurde, aber leider hat mir keine Antwort, die ich hier gefunden habe, wirklich geholfen.

Ich habe zum Beispiel diese Antworten versucht:

  • Bootstrap-Fußzeile nicht unten
  • Fußzeile zum Ende der Seite spülen, Twitter Bootstrap
  • Höhe nicht 100% auf Container Fluid, obwohl HTML und Body sind

Aber ich habe immer noch das Problem, dass, wenn mein Seiteninhalt zu “klein” ist und nicht die gesamte Höhe des Körper-/Seitencontainers ausfüllt, die Fußzeile einfach irgendwo über dem Ende des Browserfensters schwebt.

Dies ist der Code für meine Fußzeile:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
  <div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
    <div class="align-left">
      <a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
      <a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link2</a> |
      <a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link3</a>
    </div>
    <div class="align-right small">
      Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
    </div>
  </div>
</footer>

Ich verwende Bootstrap 4.1 und Chrome, hier ist auch ein Codepen zu meiner Seite:

https://codepen.io/anon/pen/oMZVxq

Hinweis: Sie müssen die Seitenleistenansicht in Codepen verwenden, um tatsächlich zu sehen, dass sich die Fußzeile nicht unten befindet, da die Ansichtsgröße in Codepen so klein ist, dass sie korrekt aussieht.

  • Wenn Sie eine Fußzeile mit statischer Höhe haben, können Sie so etwas tun dieser Codestift

    – zgut

    23. Juli 2018 um 14:31 Uhr

Bootstrap 4 Fuszeile nicht ganz unten
G-Cyrillus

Sie können die integrierte Bootstrap-Klasse verwenden, um dies zu erreichen.

Was Sie brauchen, ist, dass der Container ein Column-Flex-Container ist. zu verwendende Klasse sind: d-flex flex-column

Um den Container auf height:100% zu setzen, können Sie die Klasse anwenden h-100zu html, body und dem container hinzufügen oder zum container style hinzufügen height:100vh;

Für die Fußzeile, a margin-top:auto tun wird, ist die zu verwendende Klasse: mt-auto;

Beispiel unten, um im Ganzseitenmodus ausgeführt zu werden

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>




<html class="h-100">
    <body class="h-100">
        <!-- Page Container -->
        <div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
            <!-- Header -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
                    <div class="d-flex justify-content-start align-items-center">
                        

<a href="https://stackoverflow.com/" class="kf-links">
    
        <span class="h5">
            <i class="fas fa-paper-plane"></i>
            <span class="h4 font-weight-bold kf-dark">
                MyPage
            </span>
        </span>
    
</a>
                    </div>
                    <!-- Main Header Navigation -->
                    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a href="https://stackoverflow.com/" class="nav-link ">Link1</a>
                            </li>
                            <li class="nav-item">
                                
                                <a href="" class="nav-link ">Link2</a>
                            </li>

                            
                                <li  class="nav-item">
                                    
                                    <a href="" class="nav-link ">Link3</a>
                                </li>
                            

                            
                        </ul>
                    </div>
                    <!-- END Main Header Navigation -->
                </div>
            </nav>
            <!-- END Header -->

            <!-- Main Container -->
                
                    <div style="background:#5c90d2">
                        <div class="col-md-12 text-center pt-5 pb-5">
                            <div class="pt-5 pb-5">
                                <h1>
                                    <span class="main-text">
                                        Login
                                    </span>
                                </h1>
                                <p class="lead"><span class="main-text">
                                            Login Now!
                                        </span></p>
                            </div>
                        </div>
                    </div>
                

                <!-- Content -->
                
        <div class="d-flex justify-content-center fadeIn">
            <div class="col-md-8 col-xs-12">
    <div class="d-flex justify-content-center">
        <div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
            <form class="form-horizontal" method="post">
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="">
                        <label for="id_username">E-Mail</label>
                        <input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="">
                        <label for="id_password">Password</label>
                        <input id="id_password" class="form-control" name="password" type="password" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <small class="float-right">
                        <a href="#" class="kf-links">Forgot Password?</a>
                    </small>
                </div>
            </div>
            <div class="form-group mt-5">
                <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
                    <button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
                </div>
            </div>
        </form>
        </div>
    </div>

            </div>
        </div>

                <!-- END Content -->

            <!-- END Main Container -->

            <!-- Footer -->
            <footer class="d-flex justify-content-center mt-auto">
                <div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
                    <!-- Copyright Info -->
                        <div class="align-left">
                            
                                <a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
                            
                            <a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link2</a> |
                            <a class="font-weight-bold small kf-blue kf-links" href="https://stackoverflow.com/">Link3</a>
                        </div>
                        <div class="align-right small">
                            Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
                        </div>
                    <!-- END Copyright Info -->
                </div>
            </footer>
            <!-- END Footer -->
        </div>

        <!-- END Page Container -->
    </body>
</html>

Codestift aktualisiert https://codepen.io/anon/pen/PBpgNN


Erinnerung für Boostrap-Klassen https://getbootstrap.com/docs/4.5/utilities/flex/ über Dimensionierung siehe https://getbootstrap.com/docs/4.5/utilities/sizing/

  • wahrscheinlich 100vh anstatt 100vw?

    – numrut

    22. Januar 2019 um 11:47 Uhr

  • Danke für die Erwähnung des Hinzufügens h-100 zum <html> Tag, das habe ich total übersehen und konnte nicht herausfinden, warum es nicht funktionieren würde.

    – Casper Wilke

    16. Oktober 2020 um 16:07 Uhr

1647169326 410 Bootstrap 4 Fuszeile nicht ganz unten
shivamag00

Wenn Sie eine feste Fußzeile wünschen, fügen Sie einfach die Klasse hinzu fixed-bottom zum footer Tag wie unten gezeigt.

<footer class="fixed-bottom bg-dark">    
    <div class="text-center">
        <p>Footer</p>
    </div>
</footer>

1647169327 282 Bootstrap 4 Fuszeile nicht ganz unten
Razvan Zamfir

Zuerst hinzufügen display: flex; und flex-direction: column; zu #page-container.

Jetzt haben Sie die Voraussetzungen geschaffen, um die Fußzeile nach unten auszurichten. Stellen Sie es ein margin-top zu auto (durch Hinzufügen der Klasse mt-auto) und du bist fertig;

<div class="d-flex justify-content-center mt-auto">
 Content here
</div>

Sehen dieser Codestift.

  • Nur eine Warnung, dass Sie Ihr Tag als “

    ” begonnen und das Tag als “

    ” beendet haben.

    – Ryan

    5. April 2019 um 3:54 Uhr

Also das hat mir geholfen – falls jemand noch nach einer Antwort sucht:

auf Ihrem <HTML>, <body> und Ihr Container-Div fügt eine Klasse hinzu h-100 und Ihre Fußzeile bleibt unten.

Wichtig

Eine Sache, die ich getan habe, um die zusätzliche Höhe zu entfernen, ist, dass ich bei meinem Container-Div die geändert habe h-100 Styling zu height: calc(100% - 200px) !important; (wobei -200px die Höhe meiner Navigation und Fußzeile war)

Wenn Sie den Bootstrap nicht verwenden, finden Sie hier das Styling .h-100{height:100% !important}

997330cookie-checkBootstrap 4: Fußzeile nicht ganz unten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy