Question

请帮助，经过两个小时的挣扎，我的智慧结束了！ http://www.tumblrating.com/choose.aspx?blog=nevver

问题是我希望breadcrumbs框能够延伸到“fun mode”框，但是当你缩小窗口时会缩小

我得到它至少在经过多次挣扎后向左浮动......但是现在当你调整页面大小时，顶部有空白区域（!!）

有人可以帮助bootstrap / css专家吗？

修改::

关于流动自助运动有问题的人偶然发现：

我忘记的一个重要的事情是，在每个嵌套div中，跨度必须加起来12而不是仅仅添加到父级（它是固定的方式）。例如div class =“span3”仍然需要两个div class =“span6”来加入最多12个（100％）。

Answer 1

你有padding-top：在choose.aspx中为body设置了60px，而导航栏有position:fixed它看起来没问题，但bootstrap的响应性css使得position:static对于比979px窄的屏幕，并且body的填充会产生这种效果。

你应该设置.navbar:fixed来覆盖bootstrap的响应规则，或者在屏幕比979px更窄的时候添加css媒体查询以使身体padding-top:0px，在你制作它的同一个地方

所以在choose.aspx中设置体型：

body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
//+ add this
@media (max-width: 979px) {
    body {
        padding-top: 0px;
    }
}

Answer 2

你需要的一切都在div“span12”（class =“span12”）里面，它设置为100％宽度。通过任意放置以后可以删除的颜色边框，您可以看到它所覆盖的区域。

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

在尝试任何修复之前，请删除您设置为内联或使用“！important”标记的所有属性，因为它们会覆盖您下次执行的任何操作，并且很难找到使其工作所需的确切数值。 / p>

将这两个内部div的边框设置为不同的颜色以进行调试。向左移动“span8向左拉”，在css文件中向左移动“span4”（请注意，您必须使用开发人员工具找出哪些标签以及哪些行在您的css文件中引用它们;我有一个移动设备设备，这就是为什么我不给你这条线，因为它可能不是你需要的那条）。在“span4”的结束标记之后和“span12”持有者的结束标记之前添加一个清晰的html元素，如下所示，

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

这是一个黑客，但它比直接在CSS中添加clear更好。

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

希望它有所帮助！

引导流体布局跨度，浮动问题，顶部问题的空白区域

2 个答案: