https://gist.github.com/2354116
如果您在 Chrome/Firefox 中查看上述页面,那么一切似乎都很好。底部的 div(两个标题和社交图标)包裹在一个容器 div 和居中,没有问题。
如果在 Safari 中查看,那么这三个 div 根本不会居中:/
我不确定这是为什么......任何人都可以帮忙吗?
最佳答案
注意:必须对您的设计进行大量假设,因此请修改任何不符合您原始设计的内容。
首先,您没有正确包含您的页面元素(内容、旋转木马、页脚),您目前有多个宽度的容器试图并排放置,这在多个地方破坏了您的设计。
你的内容容器是width:940px
,你的.wrapper
div是width:750px
,你的.paramWrapper
div 是 width:870px
,你的 .carousel
div 是 width:735px
。您必须选择一个宽度并坚持使用它,然后使用边距将内容相应地推送到您的页面上。我使用了 860px
,这是 span11
类的宽度。
接下来,您将直接修改 bootstrap.css
样式表,这意味着每当 Bootstrap 更新时,如果您覆盖 Bootstrap 样式表,您的所有更改都将丢失,因此创建另一个样式表并将所有自定义样式放在那里,然后在标题中的 Bootstrap 样式表“之后”加载它。
现在回到您原来的问题,底部的 .paraWrapper
div 没有正确堆叠,因为您在容器中设置了宽度 870px
并且其中的元素没有添加达到那个宽度:
span3
+ span3
+ span2
+ margin = 640px
所以这不是问题或错误,只是您的布局。
这是我很快提出的固定版本,因此您将不得不再次修改元素以适合您的设计:http://jsfiddle.net/rzSFa/3/ , 这是一个 demo它的外观。
顺便说一句,您使用响应式 Bootstrap 样式表是徒劳的,它目前对您的情况没有多大作用,那么为什么还要使用它呢?您可以轻松修改一些媒体查询以支持我的固定版本,但您的版本根本不起作用,因为您声明了所有具有自定义宽度的类,因此没有必要包含它。
关于Safari 中的 CSS 错误,但 Chrome/Firefox 中没有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10095146/