Twitter Bootstrap 3 Chú thích

204

Tôi đã sử dụng khung bootstrap twitter khá lâu rồi và gần đây họ đã cập nhật lên phiên bản 3!

Tôi gặp khó khăn khi để phần chân dính vào đáy, tôi đã sử dụng mẫu khởi động được cung cấp bởi trang web bootstrap twitter, nhưng vẫn không gặp may, có ý tưởng nào không?

html  css  twitter-bootstrap  twitter-bootstrap-3 
— Brad Fletcher
nguồn
31
— ptim
3
@memeLab tại sao ví dụ chính thức không có bất cứ điều gì về phần thân lề-dưới: -60px? Hay là tôi đã bỏ lỡ nó ...?
— ganders
Đã thêm một giải pháp CSS duy nhất cho phép chiều cao thay đổi cho chân trang dính. Liên kết nó ở đây như là câu trả lời mới, nó ở dưới cùng của trang.
— tao

Câu trả lời:

193

chỉ cần thêm lớp navbar-fixed-bottom vào chân trang của bạn.

<div class="footer navbar-fixed-bottom">
— Jon
nguồn
32
đây không giống như footer dính
— Yura Omelchuk
3
Nếu bạn có đầu trang và chân trang, bạn sẽ mất quá nhiều không gian trên thiết bị di động.
— strattonn
4
@strattonn đó là những gì các truy vấn truyền thông dành cho
— Jacob Raccuia
20
Điều này hoạt động hoàn hảo nếu trang không cần cuộn. Nhưng chân trang trùng lặp với nhiều nội dung trên trang. Bất kỳ cách giải quyết về điều này? Cảm ơn!
— Xplora
1
không chắc chắn về vấn đề chồng chéo, nhưng việc thêm lề / phần đệm không giải quyết được vấn đề?
— Jon
152

Đề cập đến ví dụ chân dính Boostrap3 chính thức, không cần thêm <div id="push"></div>và CSS đơn giản hơn.

CSS được sử dụng trong ví dụ chính thức là:

/* Sticky footer styles
-------------------------------------------------- */

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;
  /* 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;
}

và HTML thiết yếu:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

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

Bạn có thể tìm thấy liên kết cho css này trong mã nguồn của ví dụ dính .

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

URL đầy đủ: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

— tkymtk
nguồn
21
HTML & CSS trong ví dụ chân trang chính thức bây giờ khá khác so với những gì được mô tả ở đây, ví dụ như không sử dụng div 'quấn' nữa.
— IanB
52

Đây là một phương pháp sẽ thêm một chân trang dính mà không yêu cầu bất kỳ CSS hoặc Javascript bổ sung nào ngoài những gì đã có trong Bootstrap và sẽ không can thiệp vào chân trang hiện tại của bạn.

Ví dụ ở đây: Easy Stick Footer

Chỉ cần sao chép và dán trực tiếp vào mã của bạn. Không ồn ào không ầm ĩ.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
— anataliocs
nguồn
4
Rất đẹp và nhanh chóng. Có thể đáp ứng là tốt. Nhưng cần phải thêm một số không gian bổ sung ở cuối nội dung trang để nó không bị ẩn bởi chân trang. Không gian nên có chiều cao bằng chiều cao chân trang. Bạn có thể chỉ ra cách tốt nhất để làm điều đó? BTW "không yêu cầu bất kỳ CSS" là sai về mặt kỹ thuật. Nó phải là "không yêu cầu bất kỳ CSS bổ sung nào ngoài các lớp Bootstrap" .
— ADTC
1
Tôi thích rằng điều này thúc đẩy những gì hiện có trong bootstrap. Tôi không thể có được câu trả lời hàng đầu khác để làm việc nhưng dán nó trong trang của tôi và bam, footer dính. Cảm ơn!
— haakon.io
34

Ngoài CSS bạn vừa thêm, hãy nhớ rằng bạn cần thêm div đẩy trước khi đóng div div

Cấu trúc cơ bản cho HTML là 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Xem trực tiếp
Chỉnh sửa chế độ xem

— David Taiaroa
nguồn
Nếu nội dung trang lớn hơn màn hình có sẵn, chân trang sẽ được đẩy xuống. Tôi muốn chân trang thực sự bị dính vào đáy (như navbar-fixed-bottom)
— blueFast
này @delavnog, cái gì đó như thế này sẽ làm việc cho bạn? codepen.io/panchroma/pen/wMXWpY . Các bit quan trọng duy nhất cho bạn là HTML ở dòng 647 và CSS
— David Taiaroa
@delavnog, cùng một ý tưởng với nội dung tối thiểu trên trang codepen.io/panchroma/pen/JGZKqy
— David Taiaroa
Cảm ơn, thật tuyệt! Bây giờ, nếu tôi có thể lấy div chính tập trung theo chiều dọc giữa nav và footer, điều đó thật tuyệt vời! Ngồi biên tập của bạn codepen: codepen.io/anon/pen/rxKMaW (tôi đã có thêm một biên độ cho cơ thể, vì nav đang ăn lên phía trên cùng của nội dung)
— blueFast
@delavnog, đây là một sự khởi đầu nếu cơ thể chính không quá cao. Sẽ mất nhiều công sức hơn cho nội dung dài hơn: codepen.io/panchroma/pen/vLrXMq
— David Taiaroa
30

Đây là mã đơn giản hóa của Foot Footer cho đến ngày hôm nay bởi vì họ luôn tối ưu hóa nó và điều này thật TỐT:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

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;
}
— Leniel Maccaferri
nguồn
1
Giải pháp hoàn hảo. Đó là những gì tôi đang tìm kiếm.
— Levimatt
1
Thật không may chân trang này có kích thước cố định. Đôi khi, khi footer là động, nó có thể lớn hơn hoặc nhỏ hơn chiều cao của nó trong css.
— 23W
27

Tôi hơi muộn về đề tài này nhưng tôi đã xem qua bài viết này như tôi đã chỉ được cắn câu hỏi đó và cuối cùng tìm thấy một cách thực sự dễ dàng để vượt qua nó, bạn chỉ cần sử dụng một navbarvới navbar-fixed-bottomlớp kích hoạt. Ví dụ:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

— iMil
nguồn
Tôi thích sự đơn giản và hiệu quả của câu trả lời của bạn, mà nhân tiện là một câu trả lời thông minh. Nhiều câu trả lời cho cùng một vấn đề đầy rẫy, và những thứ phức tạp. Cảm ơn người đàn ông.
— Digitai
1
Đó là một nửa giải pháp, bạn vẫn cần quan tâm đến sự chồng chéo của nội dung trên trang của mình nếu bạn thay đổi kích thước.
— Baldráni
@ Baldráni Không nó một giải pháp đầy đủ, chồng chéo làm việc tốt nếu bạn sử dụng Bootstrap hàng và col trong html footer (đó là những gì bạn nên làm anyway)
— Tino Mclaren
Đây không phải là một footer dính. Đó là một thanh điều hướng dưới cùng cố định chỉ phù hợp với nội dung của thanh điều hướng và chồng lấp nội dung trang.
— Zim
10

Đây là giải pháp cập nhật của tôi cho vấn đề này. 

 /* 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;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

Và sử dụng nó như thế này: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

Hoặc là 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
— zee
nguồn
4
Đây không phải là một giải pháp tốt vì chân trang của bạn đã được sửa, điều đó có nghĩa là nó chồng lấp nội dung trang (nếu có). Hãy thử thêm một vài some text<br>dòng trước chân trang và kích thước xuống cửa sổ.
— jmarceli
@ user2041318: vâng thật kinh khủng ... cảm ơn vì đã chỉ ra điều này.
— Sebastian
Điều này đã được sửa chữa theo bình luận của jmarceli. Chân trang không còn cố định.
— zee
3

Ví dụ dính không làm việc cho tôi. Giải pháp của tôi:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— Andi Giga
nguồn
Đơn giản, CSS lỗi thời. Công việc hoàn thành. Tôi thấy thật thú vị khi một số câu trả lời được đánh giá cao hơn. Không phải Bootstrap sẽ làm cho cuộc sống của chúng ta dễ dàng hơn sao? 😂
— Kal
2

Việc đẩy divphải đi ngay sau wrap, KHÔNG trong vòng .. chỉ như thế này 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
— Giuse
nguồn
2

Đã được trả lời bởi OP:

Thêm phần này vào tệp CSS của bạn.

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 it's height */
  margin: 0 auto -60px;
}

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

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
— CodeCaster
nguồn
2

Tôi muốn một footer dính linh hoạt , đó là lý do tại sao tôi đến đây. Câu trả lời hàng đầu đã đưa tôi đi đúng hướng.

Hiện tại (2 tháng 10) Bootstrap 3 css Chân trang dính (Kích thước cố định) trông như thế này:

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;
}

Miễn là chân trang có kích thước cố định, phần dưới lề cơ thể tạo ra một lực đẩy để cho phép một túi để chân trang ngồi vào. Trong trường hợp này, cả hai đều được đặt thành 60px. Nhưng nếu chân trang không cố định và vượt quá chiều cao 60px, nó sẽ bao phủ nội dung trang của bạn.

Làm cho linh hoạt: Xóa lề cơ thể css và chiều cao chân trang. Sau đó thêm JavaScript để lấy chiều cao chân trang và đặt lề lềBottom. Điều đó được thực hiện với hàm setfooter (). Tiếp theo thêm trình lắng nghe sự kiện khi trang tải lần đầu tiên và khi thay đổi kích thước chạy chương trình setfooter. Lưu ý: Nếu chân trang của bạn có một cây đàn accordion hoặc bất cứ thứ gì khác kích hoạt thay đổi kích thước, mà không thay đổi kích thước cửa sổ, bạn phải gọi lại hàm setfooter ().

Chạy đoạn trích và sau đó toàn màn hình để demo nó.

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
Mở rộng đoạn trích

— Sterner
nguồn
2

Js đơn giản

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Cập nhật số 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
— fdrv
nguồn
1

Để tóm tắt tất cả những điều này, chỉ cần giữ một điều trong tâm trí của bạn rằng tất cả mọi thứ ngoại trừ chân trang nên có min-height: 100%hoặc ít hơn một chút.

— kshirish
nguồn
1

Tôi viết mã chân trang đơn giản hóa của mình với phần đệm bằng LESS. Câu trả lời này có thể lạc đề vì câu hỏi không nói về phần đệm, vì vậy nếu bạn quan tâm hãy kiểm tra bài đăng này để biết thêm chi tiết.

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
— Fred K
nguồn
1

Dựa trên câu trả lời của Jek-fdrv , tôi đã thêm một .on('resize', function()để đảm bảo nó hoạt động trên mọi thiết bị và mọi độ phân giải:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
— iamchriswick
nguồn
1

Phiên bản hiện tại của bootstrap dường như không còn hoạt động cho chức năng này nữa. Nếu bạn tải xuống ví dụ thanh-footer-navbar của họ và đặt một lượng lớn nội dung vào vùng thân chính, phần chân trang sẽ bị đẩy xuống phía dưới cùng của khung nhìn. Nó không dính chút nào.

— Catalano
nguồn
1

Đây là một giải pháp dựa trên CSS cho chân trang có độ cao biến đổi đáp ứng đầy đủ.
Ưu điểm: chân trang cho phép chiều cao thay đổi, vì chiều cao không còn cần phải được mã hóa cứng trong CSS.

Hiển thị đoạn mã

Và đây là không có tiền tố SCSS(for gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
— tao
nguồn
1

Chỉ cần sử dụng flex! Đảm bảo sử dụng phần thân và phần chính trong HTML của bạn và đó là một trong những giải pháp tốt nhất (trừ khi bạn cần hỗ trợ IE9). Nó không yêu cầu chiều cao cố định hoặc tương tự.

Điều đó cũng được khuyến nghị cho Vật liệu hóa!

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}
— kentor
nguồn
0

trong các từ Haml & Sass tất cả những gì cần thiết:

Haml cho app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass cho app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

dựa trên http://getbootstrap.com/examples/sticky-footer-navbar/

— tương đương8
nguồn
0

Nếu bạn muốn sử dụng bootstrap build trong các lớp cho chân trang. Bạn cũng nên viết một số javascript:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

Nó sẽ ngăn nội dung chồng chéo bởi chân trang cố định và nó sẽ điều chỉnh padding-bottomkhi người dùng thay đổi kích thước cửa sổ / màn hình.

Trong đoạn script trên, tôi giả sử rằng footer được đặt trực tiếp bên trong thẻ body như thế:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

Đây chắc chắn không phải là giải pháp tốt nhất (vì có thể tránh được JS), nhưng nó hoạt động mà không có bất kỳ vấn đề nào với sự chồng chéo, rất dễ thực hiện và đáp ứng ( heightkhông được mã hóa cứng trong CSS).

— jmarceli
nguồn
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Mở rộng đoạn trích

— Gpak
nguồn
Làm thế nào là dính này ở phía dưới?
— Sebastian
0

Dưới đây là một footer dính rất đơn giản và sạch sẽ bạn có thể sử dụng trong bootstrap. Hoàn toàn đáp ứng!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

Ví dụ: Trình diễn CodePen

— Gothburz
nguồn
Giải pháp này sẽ dịch chuyển thanh chân trang sang phải khi mở chế độ bootstrap do định vị tuyệt đối!
— thethakuri
0

Sử dụng flexboxlà cách dễ nhất mà tôi đã tìm thấy, từ những kẻ lừa đảo CSS . Đây là chân trang thực sự, nó hoạt động khi nội dung <100% trang và> 100% trang:

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

Và CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

Lưu ý rằng đây là bootstrap-agnellect, vì vậy nó hoạt động với bootstrap và không có nó.

— bán thân
nguồn
0

Bạn chỉ có thể thử thêm một lớp trên thanh điều hướng chân trang của mình:

navbar-fixed-bottom

Sau đó, tạo một CSS có tên custom.css và phần đệm cơ thể như thế này ..

body { padding-bottom: 70px; }
— Ikram - Ud - Daula
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.