我试图完成一个类似于这一个布局:
http://dribbble.com/shots/829195-Slate/attachments/86422
http://dribbble.com/shots/829195-Slate/attachments/86422
我的项目使用Twitter Bootstrap和响应式设计。可以使用Bootstrap实现全宽布局?
问题是,从我正在读的流体布局将被删除bootstrap 3.0,响应式设计有固定的宽度。
解决方法
因为接受的答案不在BS3的同一个星球上,我将分享我使用的是实现几乎全宽的功能。
首先,这是作弊。这不是真正的流体宽度 – 但它似乎是 – 取决于查看网站的屏幕的大小。
BS3和流体宽度站点的问题是,他们采取了这种“移动第一”的方法,这要求他们定义每个惊人的屏幕宽度,他们认为是桌面(1200像素)我在一台笔记本电脑上工作1900像素宽屏 – 所以我最终在内容的任何一边350px BS3认为是桌面尺寸的宽度。
他们已经定义了10个屏幕宽度(真的只有5,但反正)。我不觉得很舒服改变它们,因为它们是常见的宽度。所以,我选择定义一些额外的宽度,BS决定容器类的宽度时选择。
我使用BS的方式是把所有的Bootstrap提供的LESS文件,省略variables.less文件提供我自己,并添加一个自己到结束覆盖我想改变的事情。在我的较少的文件中,我添加以下以实现2个常见的屏幕宽度设置:
@media screen and (min-width: 1600px) { .container { max-width: (1600px - @grid-gutter-width); } } @media screen and (min-width: 1900px) { .container { max-width: (1900px - @grid-gutter-width); } }
这两个设置为您实现不同的屏幕宽度需要做的举例。在这里,你得到全宽度在1600px和1900px。任何小于1600 – BS回落到1200px宽度,然后到768px等等 – 到手机大小。
如果你有更大的支持,只需创建更多的@media屏幕语句,像这样。如果你正在构建CSS,你会想要确定使用了什么水槽宽度,并从目标屏幕宽度减去它。
更新:BS 3.0.1及以上(到目前为止) – 它很容易设置@ container-large-desktop到100%