gpt4 book ai didi

html - 正在修剪 Twitter Bootstrap 全宽面板

转载 作者:行者123 更新时间:2023-11-28 18:39:33 24 4
gpt4 key购买 nike

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

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

回到问题

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

我已经对它进行了一段时间的修补,以至于我已经剥离了所有东西,只是放入了一堆简单的嵌套 div 来测试并确保问题不是一些 rouge 标签,但它仍然完全一样

我认为问题与未包装在容器类中的元素有关,但如果我需要全宽面板和 940px 固定内容,我不确定如何使用 Bootstrap 实现它。

// 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>

如果我将 Bootstrap 或我的样式一起删除并手动重新设置主体样式,它就会消失,我没有掺假 Bootstrap 。但这似乎是一个累积问题......

以前有人遇到过这个吗?

如果可能的话,我真的不想剥离 Bootstrap 。

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

如果您在 jsfiddle 中注意到无论您的视口(viewport)大小是多少,标题都会填充它,但仅限于视口(viewport)。如果您使用的是 MAc 并且有魔术鼠标(或其他任何东西),您可以在该视口(viewport)中向右滚动以查看白色。但这应该是边到边的,所以不应该有白色。

最佳答案

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

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

你还应该输入 .clearfix在同一个元素上(因为 children 在漂浮)

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

检查这个working jsfiddle .

如果您使用 .navbar .nav,则可以避免上述所有修复类(class)(和同事):阅读the doc .

关于html - 正在修剪 Twitter Bootstrap 全宽面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11864790/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com