2015-06-03 138 views
0

我試圖讓我的頁腳到頁面底部。
當我創建一個小提琴它的作品; https://jsfiddle.net/3dd73cuk/
但在我的頁面上,它是「飛」的; http://bjornc.se/sites/torhultsbrunn/
我想引導有一些默認行爲,弄亂它?!頁腳不在底部

代碼

<style> 
    .footer{ 
     background-image: url("img/grassTop.png"); 
     background-size: 100%; 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     height: 150px; 
    } 
</style> 
</head> 

<body> 

<!-- Navigation --> 
<nav class="navbar navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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="#">Torhults Brunn.se</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="#">Om oss</a> 
       </li> 
       <li> 
        <a href="#">Våra tjänster</a> 
       </li> 
       <li> 
        <a href="#">Kontakt</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

<!-- Page Content --> 
<div class="container"> 

    <div class="row"> 

     <div class="col-md-3"> 
      <p class="lead">Trädgårdsmöbler</p> 
      <div class="list-group"> 
       <a href="#" class="list-group-item">Trämöbler</a> 
       <a href="#" class="list-group-item">Metallmöbler</a> 
       <a href="#" class="list-group-item">Konstrottingmöbler</a> 
       <a href="#" class="list-group-item">Parasoll & Övrigt</a> 
       <a href="#" class="list-group-item">Dynor</a> 
      </div> 
     </div> 

     <div class="col-md-9"> 

      <div class="row carousel-holder"> 

       <div class="col-md-12"> 
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
         <ol class="carousel-indicators"> 
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="4"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="5"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="6"></li> 
          <li data-target="#carousel-example-generic" data-slide-to="7"></li> 

         </ol> 
         <div class="carousel-inner"> 
          <div class="item active"> 
           <img class="slide-image" src="img/carousel/drommingeSoffa.png" style="height: 300px" alt=""/> 
          </div> 
          <div class="item"> 
           <img class="slide-image" src="img/carousel/durbanKonstRottingGrupp.png" style="height: 300px" alt=""/> 
          </div> 
          <div class="item"> 
           <img class="slide-image" src="img/carousel/nydalaGrupp.png" style="height: 300px" alt=""/> 
          </div> 
          <div class="item"> 
           <img class="slide-image" src="img/carousel/shabbyGrupp.png" style="height: 300px" alt=""/> 
          </div> 
          <div class="item"> 
           <img class="slide-image" src="img/carousel/sodertorpSoffaByggbar.png" style="height: 300px" alt=""/> 
          </div> 
          <div class="item"> 
           <img class="slide-image" src="img/carousel/tannoHammock.png" style="height: 300px" alt=""/> 
          </div> 
          <div class="item"> 
           <img class="slide-image" src="img/carousel/torpetTradgardsgrupp.png" style="height: 300px" alt=""/> 
          </div> 
         </div> 
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
          <span class="glyphicon glyphicon-chevron-left"></span> 
         </a> 
         <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
          <span class="glyphicon glyphicon-chevron-right"></span> 
         </a> 
        </div> 
       </div> 

      </div> 

      <div class="row"> 

       <div class="col-sm-4 col-lg-4 col-md-4"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/320x150" alt=""> 
         <div class="caption"> 
          <h4 class="pull-right">$24.99</h4> 
          <h4><a href="#">First Product</a> 
          </h4> 
          <p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p> 
         </div> 
         <div class="ratings"> 
          <p class="pull-right">15 reviews</p> 
          <p> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
          </p> 
         </div> 
        </div> 
       </div> 

       <div class="col-sm-4 col-lg-4 col-md-4"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/320x150" alt=""> 
         <div class="caption"> 
          <h4 class="pull-right">$64.99</h4> 
          <h4><a href="#">Second Product</a> 
          </h4> 
          <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
         </div> 
         <div class="ratings"> 
          <p class="pull-right">12 reviews</p> 
          <p> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star-empty"></span> 
          </p> 
         </div> 
        </div> 
       </div> 

       <div class="col-sm-4 col-lg-4 col-md-4"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/320x150" alt=""> 
         <div class="caption"> 
          <h4 class="pull-right">$74.99</h4> 
          <h4><a href="#">Third Product</a> 
          </h4> 
          <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
         </div> 
         <div class="ratings"> 
          <p class="pull-right">31 reviews</p> 
          <p> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star-empty"></span> 
          </p> 
         </div> 
        </div> 
       </div> 

       <div class="col-sm-4 col-lg-4 col-md-4"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/320x150" alt=""> 
         <div class="caption"> 
          <h4 class="pull-right">$84.99</h4> 
          <h4><a href="#">Fourth Product</a> 
          </h4> 
          <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
         </div> 
         <div class="ratings"> 
          <p class="pull-right">6 reviews</p> 
          <p> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star-empty"></span> 
           <span class="glyphicon glyphicon-star-empty"></span> 
          </p> 
         </div> 
        </div> 
       </div> 

       <div class="col-sm-4 col-lg-4 col-md-4"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/320x150" alt=""> 
         <div class="caption"> 
          <h4 class="pull-right">$94.99</h4> 
          <h4><a href="#">Fifth Product</a> 
          </h4> 
          <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
         </div> 
         <div class="ratings"> 
          <p class="pull-right">18 reviews</p> 
          <p> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star"></span> 
           <span class="glyphicon glyphicon-star-empty"></span> 
          </p> 
         </div> 
        </div> 
       </div> 

       <div class="col-sm-4 col-lg-4 col-md-4"> 
        <h4><a href="#">Like this template?</a> 
        </h4> 
        <p>If you like this template, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this tutorial</a> on how to build a working review system for your online store!</p> 
        <a class="btn btn-primary" target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">View Tutorial</a> 
       </div> 

      </div> 

     </div> 

    </div> 

</div> 
<!-- /.container --> 
<hr> 

<!-- Footer --> 
<footer class="footer"> 

     <div class="col-lg-12"> 
      <p>Copyright &copy; Torhultsbrunn 2015</p> 
     </div> 

</footer> 

<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

</body> 
+0

它不是浮動它是固定的,但你的中間的內容是越來越重疊。嘗試位置:絕對在容器上 – Dimple

回答

2

在你shop-homepage.css你有這樣的:

margin: 50px 0; 

那是什麼原因引起的「飛」,因爲它的應用邊際它,迫使它,即使您有bottom: 0;禮物,但由於您在bootstrap.min.css之後包含了shop-homepage.css,它將覆蓋之前的.footer

只需將其更改爲:

margin: 0px 0; 
+1

完美!謝謝! –