https://gist.github.com/2354116
如果您在 Chrome/Firefox 中查看上述页面,那么一切似乎都很好。底部的 div(两个标题和社交图标)被包裹在一个容器 div 中并且居中没有问题。
如果在 Safari 中查看,那么这三个 div 根本不居中:/
我不知道这是为什么....有人可以帮忙吗?
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
直接修改样式表,这意味着无论何时更新引导程序,如果您覆盖引导程序样式表,所有更改都将丢失,因此创建另一个样式表并将所有自定义样式放在那里并加载它“之后”标题中的引导样式表。
现在到你原来的问题上,底部.paraWrapper
div 没有正确堆叠,因为你870px
的容器中设置了宽度,并且其中的元素加起来不等于该宽度:
span3
+ span3
+ span2
+ 边距 =640px
所以这不是问题或错误,它只是你的布局。
这是我很快提出的一个固定版本,因此您将不得不再次修改元素以适合您的设计:http: //jsfiddle.net/rzSFa/3/,这是它的外观演示像。
顺便说一句,你使用响应式引导样式表是徒劳的,它目前在你的情况下没有做太多,那么为什么还要使用它呢?您可以轻松地修改一些媒体查询以支持我的固定版本,但您的将根本不起作用,因为您声明所有自己的类都具有自定义宽度,因此包含它没有意义。