自举流体和静态容器 [英] bootstrap fluid and static container

问题描述

我想要的是（例如），将一个大图像作为一个大图像英雄单位（但不是英雄单位）100％视口的宽度/高度，或3列图像除以100％，但在其他场合（在同一页面内），它将具有最大1200px的容器和bootstrap的网格元素。我计划将它与这个 http://untame.net/2013/01/how-to-design-a-single-page-scrolling-site-with-twitter-bootstrap/ 创建一个垂直滚动单页面网站。

它可以实现吗？或者我应该为单个页面的所有部分进行自定义布局，并应用媒体查询？

我会尝试3列图像与正常 .span4 和 row-fluid ，但它增加了我不想要的阴沟。当我尝试去除排水沟时，跨距变短。

我会尽快更新我的问题，并提供一个我想要做的事情的例子，以及我现在的位置。

* UPDATE *

这里是我迄今完成的工作的完整页面结果
http://jsfiddle.net/ditikos/ejMAQ/4/embedded/result/

现在 .block 指的是将生成页面的JavaScript类， （在 .thumbnail 的第二种情况中，它可以高达2倍的视口高度，因为在一个页面中也可以有一组6个缩略图）

• 如何将三列 .block 置于当我到手机视图它会堆叠像正常网格？


• 我实际上试图制作三列内容传送带与 .aThird


解决方案

如果您阅读Bootstrap的网站，您会发现：

• 基本流体网格HTML **


• 通过将.row更改为.row-fluid来使任何行变流畅。课程保持完全一样，使得在固定网格和流动网格之间轻松切换。

编辑：这个答案对bootstrap 3

无效

I am trying to combine fluid containers with fixed containers in a single page bootstrap layout.

What I want is (for example), to have a big image as a hero unit (but not with hero-unit) 100% width/height of the viewport, or a 3 column images divided by that 100%, but in other occasions (inside the same page) it will have the max 1200px container along with the grid elements of bootstrap. I plan to combine it with this http://untame.net/2013/01/how-to-design-a-single-page-scrolling-site-with-twitter-bootstrap/ to make a vertical scrolling single page site.

Is it achievable? Or I should go on a custom layout for all the "sections" of my single page and apply media queries?

I would have tried the 3 column images with the normal .span4 and row-fluid but it adds gutter that I don't want. When I try to remove the gutter, the spans get shorter.

I will try to update my question soon with a working example of what I would try to do, and where I am at the moment.

* UPDATE *

here is a full page result of the thing I have done so far http://jsfiddle.net/ditikos/ejMAQ/4/embedded/result/

now .block refers to the javascript class that will generate the pages so that they would be minimum of the viewport height (in the second situation of the .thumbnail, it can get up to 2x the viewport height because there could also be a set of 6 thumbnails in one page)

• How can I put the three columns .block in a way that when I get to the phone view it would stack like the normal grid?
• I am actually trying to make a three column content carousel with the .aThird slices. Is it possible with a grid layout?

解决方案

If you read Bootstrap's website you would find:

• Basic fluid grid HTML**
• "Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids."

Edit: This answer is not valid for bootstrap 3

这篇关于自举流体和静态容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！