2012-09-26 115 views
1

我遇到了問題。我正在使用Twitter Bootstrap作爲我的網站http://www.bouq.de的框架。現在我已啓用響應功能。當我在320px寬度的智能手機上查看網站或將瀏覽器窗口縮小到較小尺寸時,頁腳的背景不會被削減,邊距約爲20px。但是我希望在整個寬度上顯示頁腳背景。bootstrap響應式切割頁腳背景

就像當你用http://twitter.github.com/bootstrap/進行同樣的操作時,劑量會將頁邊空白放到頁腳背景上。

而且我不太清楚如何讓這個現在:)

這裏是我的頁腳代碼

<footer> 
<section class="footer-top"> 
    <div class="container" > 
     <div class="row"> 
      <div class="span4"> 
       <div class="bouq-footer-desc-wrapper"> 
        <img src="<?php bloginfo('template_url');?>/img/bouq-logo-footer.png" /> 
        <p class="bouq-footer-desc">bouq. ist eine kreative Künstlerplattform mit familiärem Charakter, fokussiert auf die Produktion und Vermarktung von anspruchsvoller, elektronischer Musik und der damit verbundenen Kultur.</p> 
       </div> 
      </div> 
      <div class="span4"> 
       <?php if (function_exists('dynamic_sidebar')) dynamic_sidebar("footer-left"); ?> 
      </div> 
      <div class="span4"> 
       <?php if (function_exists('dynamic_sidebar')) dynamic_sidebar("footer-right"); ?> 
      </div> 

     </div> 
    </div> 
</section> 
<section class="footer-bottom"> 
    <div class="container" > 
     <div class="row"> 
      <div class="span12"> 
       <div class="law"> 
        <a href="/impressum">Impressum</a> | <a href="mailto:[email protected]">Kontakt</a> | &copy; bouq. c/o Level Eins <?php the_time('Y') ?> | designed by <a href="http://www.upplex.de" target="_blank" rel="tooltip" data-placement="top" title="Webdesign by upplex.de" >upplex</a> <p class="pull-right"><a href="#">Nach oben</a></p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

回答

1

線964在您的響應CSS,upplex,框架 - response.min.css,你有以下聲明:

@media (max-width:767px) { body { 
    padding-left: 20px; 
    padding-right: 20px; 
    }} 

這是給任何東西767px身體兩側的邊緣。你需要刪除/覆蓋這個。

+0

好的謝謝:)我來試試 – mat0r

+0

好tryed的是,它的工作原理,但並不像它應該上班。當我這樣做時,上面的導航欄左右兩側隱藏了20px。如果內容仍然與此設置保持一致,那將會很不錯 – mat0r

0

好吧我固定它:)

footer, .page-title-container { 
    margin-left: -20px; 
    margin-right: -20px; } 

.page-title-container-wrapper, .bouq-footer-ext {  padding: 0px 10px 0px 10px; } 

就不得不在第二包裝墊襯加