1

我正在使用引导程序处理一个固定宽度的页面，我注意到在 iPhone 上测试它时，全宽页眉和页脚背景被剪裁为宽度的 70%。

这是一个商业营销类型的网站，寻找供应商的人经常光顾，通常来自他们的办公室 PC，因此响应方面不是必需的，但我离题了。

回到问题

在全尺寸屏幕上查看它看起来应该是这样，但是如果您滚动小于容器类的限制（在本例中为 940 像素）然后向后滚动一点，您可以看到背景已被修剪。

我已经对它进行了一段时间的修改，以至于我已经剥离了所有内容，只是放入了一堆简单的嵌套 div 来测试并确保问题不是一些胭脂标签，但它仍然做同样的事情。

我认为这个问题与未包装在容器类中的项目有关，但如果我需要一个全宽面板和 940 像素的固定内容，我不确定我将如何使用引导程序来实现它。

// This Fails
<body>
    <header class="fullwidth">
        <div class="container">
            <p>The content</p>
        </div>
    </div>
</body>

// This is fine but not full width
<body>
    <header class="container">
        <p>The content</p>
    </header>
</body>

如果我将引导程序或我的样式一起移除并手动重新设计主体，我没有掺假它会消失。但这似乎是一个累积的问题......

有人遇到过这个吗？

如果可能的话，我真的不想剥离引导程序。

根据要求，我附加了链接：http: //jsfiddle.net/NcZFz/3/

如果您在 jsfiddle 中注意到，无论您的视口是什么大小，标题都会填充它，但仅视口。如果您使用的是 MAc 并且有一个魔术鼠标（或其他），您可以在该视口中向右滚动以查看白色。但这应该是边缘到边缘，所以不应该有白色。

4

1 回答 1

1

看来您在<ul id="menu-primary-navigation">

#menu-primary-navigation { margin-left: 0; }

而且你也应该穿上.clearfix相同的元素（因为孩子们是浮动的）

<ul id="menu-primary-navigation" class="clearfix">

检查这个工作 jsfiddle。

.navbar .nav如果您使用类（和关联），则可以避免上述所有修复：阅读文档。

于 2012-08-09T09:50:26.353 回答