引导响应剪切页脚背景答案

【问题标题】：bootstrap responsive cutting footer background引导响应剪切页脚背景
【发布时间】：2012-09-27 09:29:02
【问题描述】：

我遇到了问题。我正在使用 Twitter Bootstrap 作为我的网站 http://www.bouq.de 的框架。现在我启用了响应功能。当我在宽度为 320 像素的智能手机上查看该网站或将浏览器窗口缩放到小尺寸时，页脚的背景将被切割，边距约为 20 像素。但我想让页脚背景全宽显示。

就像你对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>

【问题讨论】：

标签： css twitter-bootstrap responsive-design

【解决方案1】：

在响应式 CSS upplex-framework-responsive.min.css 的第 964 行，您有以下声明：

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

这会在主体的任一侧为 767px 的任何内容提供边距。您需要删除/覆盖它。

【讨论】：

好的，试过了，它可以工作，但不能正常工作。当我这样做时，上面的导航栏左右隐藏 20px。如果内容仍然保持此设置，那就太好了

【解决方案2】：

好的，我修好了:)

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

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

只需在第二个包装器中添加填充

【讨论】：