1

問題が発生しました。私は自分のウェブサイトhttp://www.bouq.deのフレームワークとしてTwitterBootstrapを使用しています。これで、レスポンシブ機能が有効になりました。幅320pxのスマートフォンでサイトを表示したり、ブラウザウィンドウを小さいサイズに拡大縮小したりすると、フッターの背景が約20pxのマージンでカットされません。ただし、フッターの背景を全幅で表示したい。

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:info@bouq.de">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>

4

2 に答える 2

1

レスポンシブ CSS upplex-framework-responsive.min.css の 964 行目に、次の宣言があります。

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

これは、767px からのすべてにボディの両側に余白を与えています。これを削除/上書きする必要があります。

于 2012-09-27T00:02:59.080 に答える
0

修正しました:)

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

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

2番目のラッパーにパディングを追加する必要がありました

于 2012-09-27T01:29:02.440 に答える