boostrap粘腳和兩個響應列

在旁邊，我有兩列。這些列設置爲自動上邊距。

作爲一個例子：http://jsfiddle.net/jewelsjacobs/kSgE6/light/。

如果更改分辨率以使列落在她的腳下與圖片重疊，而不是始終位於頁面的底部。

例子： enter image description here 普通視圖：

<!DOCTYPE html> 
<html> 
<head lang="pl"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <script src="jquery.backstretch.js"></script> 
</head> 
<body> 
<script> 
    $.backstretch("img/bg.jpg"); 
</script> 
<style> 
    h1 { 
     text-align: center; 
     font-family: "AvanteGarde"; 
     font-size: 70px; 
    } 
    header p{ 
     font-family: "AvanteGarde"; 
     text-align: center; 
     font-size: 20px; 
    } 
    @font-face{ 
     font-family:"AvanteGarde"; 
     src: url('font/font2.ttf'); 
    } 
    .col-centered{ 

     text-align: center; 
     margin: 0 auto; 
    } 
    .footer { 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     /* Set the fixed height of the footer here */ 
     height: 60px; 
     text-align: center; 
     font-family:"AvanteGarde"; 
    } 
    .ng{ 
     color: #3a8c03; 
     font-family: "AvanteGarde"; 
     font-size: 40px; 
     margin-top: 0; 
    } 
    html { 
     height: 100%; 
     width: 100%; 
     min-width: 100%; 
     min-height: 100%; 
     position: relative; 
    } 

    body { 
     height: 100%; 
     width: 100%; 
     padding: 0; 
     margin: 0; 
     margin-bottom: 60px; 
    } 

    .container-fluid{ 
     height:60%; 
     display:table; 
     width: 100%; 
     padding: 0; 
    } 

    .row-fluid {height: 100%; display:table-cell; vertical-align: middle;} 

    .centering { 
     float:none; 
     margin:0 auto; 
    } 
    header{ 
     margin-bottom: 2%; 
    } 

</style> 
<header> 
    <h1><label style="color: #3a8c03"> F.P.H.U </label> <label style="color: #254c0b"> Darmont</label></h1> 
    <p style="color: #3a8c03">KOMINKI - OCZYSZCZALNIE - DORADZTWO - SERWIS</p> 
</header> 

<div class="container-fluid" style="width: 900px; margin: auto;"> 
    <div class="row-fluid"> 

      <div class="col-sm-6 col-centered"> 
       <img src="img/oczyszczalnie.png" class="img-responsive center-block"> 
       <p class="ng">oczyszczalnie</p> 
      </div> 

      <div class="col-sm-6 col-centered" style="padding-left: 120px"> 
       <img src="img/kominki.png" class="img-responsive center-block"> 
       <p class="ng">kominki</p> 
      </div> 

    </div> 
</div> 
<footer class="footer"> 
    <p>Skontaktuj sie z nami i zapytaj o produkty</p> 
    <p>nr. tel: 924 456 256 e-mail: [email protected]</p> 
</footer> 
</body> 
</html>

來源

2014-12-06 lukassz

您的jsfiddle參考指向一個不同的問題比一個上文提到的。 – VSri58 2014-12-06 15:16:47

是的，jsfiddle只有這兩個圖像始終有自動保證金，不會影響頁腳 – lukassz 2014-12-06 15:19:39

如果您想將頁腳固定在頁面底部（不是屏幕），只需要：1. remove'position：absolute'來自.footer規則的行; 2.將'

'換成'

' – Banzay 2014-12-06 20:19:26

有一個在Bootstrap website的粘頁腳很好的示例代碼，
working example

來源

2014-12-06 22:35:51

boostrap粘腳和兩個響應列

回答

相關問題