【问题标题】:Twitter bootstrap - less calculation for a fluid grid but with a fixed 30px gutterTwitter bootstrap - 流体网格的计算较少,但具有固定的 30px 装订线
【发布时间】:2012-10-31 16:33:28
【问题描述】:

是否可以在 variables.less 中更改流体网格计算,使网格是流体的,但 gutter 的宽度是固定的?

我查看了计算,但不确定如何从每个流体跨度中删除 30px 的宽度。

任何指向正确方向的指针都将不胜感激。

干杯

【问题讨论】:

    标签: twitter-bootstrap fixed fluid-layout


    【解决方案1】:

    检查您的 _variables.less 文件 - 在文件底部,您应该能够编辑您要查找的内容。

    试试这两个链接,了解计算:

    bootstrap fluid row width

    http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

    希望这会有所帮助。

    编辑:

    这可能会有所帮助:

    http://en.wikipedia.org/wiki/Cross-multiplication

    假设您使用的宽度为 940 像素,总间距为 30 像素。计算 30px 的 940px 是...

    940 to 100% equals 30 to x% -> x = 3.191489361702128 那是你的阴沟。

    如果您使用 12 个列,则您有 11 个装订线,它们使用 330px 的空间,610px 留给您的列。所以每个列应该是610px / 12 -> 50,8...px。再次进行计算:

    940 to 100% equals 50,8 to x% -> x = 6.170212765957447 对应每一列。

    当然,对其他两个(或更多)视口执行相同操作。

    希望我是对的......

    计算示例:

    (940px / 100) = (30px / x) // multiply with x->

    ((940px * x) / 100) = (30px) // multiply with 100->

    (940px * x) = (3000px) // devide with 940px->

    x = (3000px / 940px) // cutting the px

    x = 3.191489361702128

    注意在你的变量中使用.而不是逗号,

    【讨论】:

    • 谢谢你,但这是我不完全理解的计算。 Bootstrap 似乎采取了整个非流体计算并将其转换为百分比。而我需要保持排水沟固定。
    • 我也刚刚尝试将@fluidGridGutterWidth: 更改为30px;,但随后.span6 的宽度变为186%,所以我觉得我不太了解计算方法。
    • 检查我添加到答案中的链接。
    • 在阅读了链接并为此工作了几个小时之后,我仍然不明白如何完成这个抱歉 - 我的数学显然很糟糕。另外,我怀疑引导计算不是那么灵活,因为我需要将一列分成两半并且该列可能是span9 - 因此使用row-fluid 并使用span6 但因为它是嵌套的,排水沟不一样。有没有一个公式可以从百分比中删除固定的像素量?
    • 您可以尝试根据自己的意愿手动设置$fluidGridGutterWidth: ... ;,但保留原行:) 并且不要忘记$fluidGridGutterWidthTablet$fluidGridGutterWidthLarge
    【解决方案2】:

    另一种解决方案是:向您的元素添加一个额外的类,例如 .my-xtra-margin { margin-left: 30px; }(确保在引导程序定义之后包含它)或直接作为样式定义添加到您的标签中。

    但是,我认为这总是会弄乱您的布局,因为列需要一定百分比的可用宽度,并且使用固定的装订线,您最终可以使用too much

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-04-04
      • 1970-01-01
      • 2013-10-14
      • 2013-08-07
      • 2015-03-05
      • 1970-01-01
      • 2012-08-15
      相关资源
      最近更新 更多