首页 文章

流体或固定网格系统，采用响应式设计，基于Twitter Bootstrap

提问于
浏览 次
396

我对twitter bootstrap grid中的各种选项感到困惑，以及它们如何结合在一起 .

首先，您可以使用普通的固定 container 或 container-fluid .

然后任何一个都可以包含普通的 row 或流体行 row-fluid . 也就是说，你可以拥有一个带有流体排的固定容器，或一个带有固定排的容器流体......

最重要的是，您可以包含“响应式”媒体查询 .

我对这些事情如何相互作用感到困惑 . 但让我们从一个明显的例子开始 .

在the examples page本身，有's what'作为fixed grid和fluid grid的示例

但是，在我的浏览器中，在该示例页面本身上 - 两个网格的行为完全相同 . 也许是因为示例页面使用可选的响应式媒体查询？在 both 网格示例中，如果我开始逐渐缩小我的浏览器窗口，则网格元素不会逐渐变窄 - 一旦达到某个（响应性）边界宽度，它们会捕捉到更小的尺寸，并再次在更大的边界宽度处 . 但普通的'fixed'示例和'fluid'示例在这里表现完全相同 - 那么差异是什么呢？

twitter-bootstrap responsive-design fluid-layout fixed-width

5 回答

  • 6

    当您在固定宽度和流体宽度之间做出决定时，您需要根据整个页面进行思考 . 通常，您想要选择其中一个，但不是两个 . 您在问题中列出的示例实际上是在相同的固定宽度页面中 . 换句话说，Scaffolding页面使用固定宽度的布局 . 脚手架页面上的fixed grid和fluid grid并不是示例，而是用于实现固定宽度和流体宽度布局的文档 .

    适当的固定宽度示例是here . 适当的流体宽度示例是here .

    观察固定宽度示例时，如果浏览器宽度超过960px，则不应看到内容更改大小 . 这是页面的最大（固定）宽度 . 固定宽度设计中的媒体查询将指定特定样式的最小宽度 . 当您缩小浏览器窗口并看到布局捕捉到不同大小时，您将看到此操作 .

    相反，流体宽度布局将始终拉伸以适合您的浏览器窗口，无论它有多宽 . 媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比（而不是固定数量的像素） .

    “响应式”媒体查询已准备就绪 . 您只需要确定是否要为页面使用固定宽度或流体宽度布局 .

    以前，在bootstrap 2中，您必须在流体容器内使用 row-fluid 并在固定容器内使用 row . 随着引导程序3的引入， row-fluid 被删除， do no longer use it .

    EDIT ：根据评论，一些jsFiddles：

    这些小提琴完全没有Bootstrap，基于纯CSS媒体查询，这使得它们成为一个很好的起点，对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决方案的人来说 .

    回复于
  • 7

    有趣的讨论 . 我也问自己这个问题 . 流体和固定之间的主要区别在于，固定布局在网站（视口）的整个布局方面具有固定的宽度 . 如果您有一个960px宽度的视口，则每个列都有一个固定的宽度，永远不会改变 .

    流体布局表现不同 . 想象一下，您已将主布局的宽度设置为100％宽度 . 现在，每个列只会计算它的相对大小（即25％）和拉伸，因为浏览器将调整大小 . 因此，根据您的布局目的，您可以选择布局的行为方式 .

    这是a good article about fluid vs. flex .

    回复于
  • 443

    来源 - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

    优点

    • 固定宽度布局更易于使用，并且在设计方面更易于定制 .

    • 每个浏览器的宽度都相同，因此图像，表格，视频和其他固定宽度的内容不会那么麻烦 .

    • 不需要min-width或max-width，但每个浏览器都不支持 .

    • 即使网站设计为与最小屏幕分辨率800×600兼容，内容仍然足够宽，分辨率更高，易于辨认 .

    缺点

    • 固定宽度的布局可能会为屏幕分辨率较大的用户创造过多的空白区域，从而扰乱“神圣比例”，“三分法则”，整体 balancer 和其他设计原则 .

    • 较小的屏幕分辨率可能需要水平滚动条，具体取决于固定布局的宽度 .

    • 需要无缝纹理，图案和图像延续以适应具有更大分辨率的那些 .

    • 固定宽度布局在可用性方面通常具有较低的总分 .

    回复于
  • 21

    Bootstrap 3中的流体布局 .

    与Boostrap 2不同，Bootstrap 3没有.container-fluidmixin制作一个流体容器 . .container是固定宽度响应网格布局 . 在大屏幕中，一个网页内容的两侧都有过多的空白区域 .

    container-fluid 在Bootstrap 3.1中添加回来

    流体网格布局使用所有屏幕宽度，并在大屏幕中更好地工作 . 事实证明，使用Bootstrap 3 mixins创建流畅的网格布局很容易 . 以下行生成流体响应网格布局：

    .container固定;

    .container-fixed mixin将内容设置为屏幕中心并添加填充 . 它没有指定固定的页面宽度 .

    另一种方法是使用Eric Flowers' CSS style

    .my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
    回复于
  • -2

    你可以使用这个 - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid . 看看..我发现这个非常有用 . 良好的性能，非常轻的重量，所有重要的浏览器友好和流畅本身，所以你真的不需要为网格引导 .

    回复于

相关问题