Bootstrap 3 i Sticky Footer

przez ostatnią godzinę Próbowałem dowiedzieć się, co jest nie tak z moją lepką stopką nie działa. Mam dokładnie taką samą strukturę jak przykład podany na stronie getboostrap, ale wydaje się, że nie działa. Jakieś pomysły, co jest dokładnie nie tak?Bootstrap 3 i Sticky Footer

Wszystkie pliki css programu startowego są ładowane poprawnie.

<body style=""> 

    <div id="wrap"> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="/">Application name</a> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="/">Home</a></li> 
         <li><a href="/Home/About">About</a></li> 
         <li><a href="/Home/Contact">Contact</a></li> 
        </ul> 
         <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/Account/Register" id="registerLink">Register</a></li> 
     <li><a href="/Account/Login" id="loginLink">Log in</a></li> 
    </ul> 

       </div> 
      </div> 
     </div> 


     <div class="container"> 



<div class="jumbotron"> 
    <h1>ASP.NET</h1> 
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> 
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
     <h2>Getting started</h2> 
     <p> 
      ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that 
      enables a clean separation of concerns and gives you full control over markup 
      for enjoyable, agile development. 
     </p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Get more libraries</h2> 
     <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Web Hosting</h2> 
     <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p> 
    </div> 
</div> 
     </div> 

    </div> 

    <div id="footer"> 
     <div class="container"> 
      <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    </div> 


</body>

Znalazłem rozwiązanie. Myślałem, że uwzględnienie całego CSS będzie miało również CSS dla stopki, ale najwyraźniej tak nie jest. Wymagają następujące czynności, aby uczynić pracę lepką stopki z bootstrap

html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
}

Źródło

2013-09-28 teh0wner

trudno mi uwierzyć, że jest to najprostsze rozwiązanie do mocowania stopki do dołu. – JohnAllen

Polecam Ci to rozwiązanie: https://gist.github.com/martinbean/1855032 – Manza

Wykonane szybkie Fiddle z kodem i kilka usprawnień do stopki: http://jsfiddle.net/2Zaxt/.

<div id="footer" class="container"> 
    <nav class="navbar navbar-default navbar-fixed-bottom"> 
     <div class="navbar-inner navbar-content-center"> 
      <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    </nav> 
</div>

Źródło

2013-09-28 19:36:38

+16

Twój przykład to "ustalona" stopka, a nie lepka. Naprawiono zawsze widoczny niezależnie od długości treści w pionie. Przyklejony "przykleja się do dołu" i dlatego nie jest widoczny, gdy zawartość pionowa jest wystarczająca do przewinięcia w dół, ale widoczna, a na dole, gdy zawartość jest minimalna. –

Widzę, gdzie nomenklatura nie zawsze jest jasna, ale to zdecydowanie dało mi wynik, jaki chciałem. Dzięki. – Rig

idealny jeden ..... –

html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
}

Źródło

2013-09-29 11:31:00 teh0wner

Jak to pracował dla mnie.

dodałem wartości ID stopki i niestandardowy styl do tego ID, i za ten sam wygląd i dodał: "NavBar-default"

HTML

<div id="footer" class="navbar-default"> 
    <div class="container"> 
    <p>Your Footer Content Here</p>   
    </div> 
</div>

CSS

#footer { 
    background-color: #F5F5F5; 
    bottom: 0; 
    height: 60px; 
    position: relative; 
    width: 100%; 
}

Źródło

2014-03-17 12:59:18 Joshua

Dlaczego nie używasz:

.navbar-fixed-bottom

To rozwiąże twój dolny problem ze stałą nawigacją i możesz umieścić w nim wszystko.

Źródło

2014-06-12 14:19:39

który był w odpowiedzi George'a Durzi – Jordan

września 2013 r., Ale tak, twoja odpowiedź trafia od razu do sedna .. – Jordan

To nie jest lepka stopka, lepka stopka pozostaje na dole to jest tylko widoczne po przewinięciu strony w dół. – Manza

można znaleźć przykład na „lepkiej stopce ze stałym pasku nawigacyjnym” (przymocowanym do górnej części strony) w bootstrap dokumentacji: http://getbootstrap.com/examples/sticky-footer-navbar/

CSS:

/* Sticky footer styles */ 
html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 

/* Fixed navbar styles */ 
body > .container { 
    padding-top: 60px; 
}

Źródło

2014-06-24 09:06:18

Proste unikalne rozwiązanie dla lepkich Baes stopkę na @ teh0wner, dodałem trochę JS

CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

$(document).ready(function() { 
    var height = $('footer').height(); 
    $('body').css({ 
     "margin-bottom": height 
    }); 
});

Źródło

2014-09-26 05:48:23

W bootstrap 3 klas kontenerowych i stopki, jakoś zastąpić reguły CSS. Próbowałem zmienić kolor tła mojej stopki. Próbowałem wielu rzeczy, które znalazłem jako rozwiązania w sieci i nie mogłem tego zrobić. Po użyciu klasy clearfix dla stopki strona stała się tym, co naprawdę chcę zobaczyć.

.myFooter { 
 
    background-color: #c4a9f1; 
 
    width: 100%; 
 
} 
 
.hi-icon a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    z-index: 100; 
 
}

<footer class="footer clearfix"> 
 
    <div class="container myFooter"> 
 
    <div class=" "> 
 
     <div class="col-sm-3"> 
 
     <h3 class="page-header">Part 1 </h3> 
 
     <ul> 
 
      <li>Link1</li> 
 
      <li>Link2</li> 
 
      <li>Link3</li> 
 
      <li>Link4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <h3 class="page-header">Part 2</h3> 
 
     <ul> 
 
      <li>Link1</li> 
 
      <li>Link2</li> 
 
      <li>Link3</li> 
 
      <li>Link4</li> 
 
     </ul> 
 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
    </div> 
 
</footer>

Źródło

2017-01-25 19:02:21

Bootstrap 3 i Sticky Footer

Odpowiedz

Powiązane problemy