2

Please help, I'm at my wits end after two hours of struggling!
http://www.tumblrating.com/choose.aspx?blog=nevver

The issue is I want the breadcrumbs box to go stretch the way to the "fun mode" box, but then shrink when you shrink the window

I got it to at least float left after much struggle... but now when you resize the page there is white space at the top (!!)

Can someone expert in bootstrap/css please help?

EDIT::

On the off chance someone having trouble with fluid bootstrap stumbles here:

An IMPORTANT thing I had forgotten is that within each nested div the spans have to add up to 12 rather than just adding up to the parent (the way it is for fixed). For instance div class="span3" still needs two div class="span6" 's inside it to add up to 12 (100%).

4

2 回答 2

4

您在 choose.aspx 中为 body 设置了 padding-top:60px，虽然导航栏position:fixed看起来不错，但引导程序的响应式 css 使其position:static适用于比 979px 更窄的屏幕，并且 body 的 padding 产生了这种效果。

您应该设置.navbar:fixed为覆盖引导程序的响应规则，或者添加 css 媒体查询以padding-top:0px在屏幕窄于 979 像素时生成正文，在您将其设为 60 的同一位置

所以在你设置正文样式的choose.aspx中：

body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
//+ add this
@media (max-width: 979px) {
    body {
        padding-top: 0px;
    }
}
于 2013-06-11T06:59:19.390 回答
1

您需要的一切都在设置为 100% 宽度的 div "span12" (class="span12") 内。通过任意放置一个可以稍后删除的颜色边框，您可以看到它所覆盖的区域。

在里面你有“span8 pull-left”，它包裹着你的面包屑灰色条和“span4”，它包含有趣的模式元素。

在尝试任何修复之前，请删除您设置的内联或使用“！important”标签的每个属性，因为它们将覆盖您接下来执行的任何操作，并且很难找出您需要进行此工作的确切数值。

将这 2 个内部 div 的边框设置为不同的颜色以进行调试。在您的 css 文件中将“span8 pull-left”浮动到左侧，将“span4”浮动到右侧（请注意，您必须使用开发人员工具在您的 css 文件中找出哪些标签和哪些行引用了它们；我有一个手机设备，这就是我不给你电话的原因，因为它可能不是你需要的）。在“span4”的结束标记之后和“span12”持有人的结束标记之前添加一个清晰的 html 元素，如下所示，

<br style="clear:both;" />

这是一个 hack，但它比直接在 css 中添加 clear 效果更好。

然后使用两个内部 div 的边距和宽度，直到达到 100% 宽度的需要。例如，将左侧 div 设置为 80%，将右侧 div 设置为 20% 宽度。确保删除任何内部 div 中的填充，而是使用边距。每个浏览器对填充的读取方式都非常不同，并且在使用兼容性时可能会令人头疼。

希望能帮助到你！

于 2013-06-11T07:01:01.237 回答