PROSAGA码农传奇-雾计算/网格计算-Twitter bootstrap - 流体网格的计算较少，但固定的30px排水沟

Twitter bootstrap - 流体网格的计算较少，但固定的30px排水沟

作者: 纾潆锦袖迷子
发布时间: 2024-12-20 09:51:11 (2月前)
转自：

<div class =“post-text”itemprop =“text”>
  
    检查你的
     <code>
 _variables.less
 </code>
     文件 - 在文件的底部，您应该能够编辑您要查找的内容。
  
  
    尝试这两个链接，以了解计算：
  
  
    <a href="https://stackoverflow.com/questions/12380384/bootstrap-fluid-row-width">
      自举流体行宽
    </A>
  
  
    <a href="http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/" rel="nofollow noreferrer">
      http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
    </A>
  
  
    希望这个对你有帮助。
  
  
    的
      编辑：
    </强>
  
  
    这可能有所帮助：
  
  
    <a href="http://en.wikipedia.org/wiki/Cross-multiplication" rel="nofollow noreferrer">
      http://en.wikipedia.org/wiki/Cross-multiplication
    </A>
  
  
    假设您使用的是940px的宽度，以及30px的整体装订线。进行计算30px的940px是......
  
  
     <code>
 940 to 100% equals 30 to x%
 </code>
      - ＆GT;
     <code>
 x = 3.191489361702128
 </code>
     那就是你的阴沟。
  
  
    如果你使用12个cols你有11个水槽，他们使用330px的空间，610px留给你的cols。所以每个col应该是
     <code>
 610px / 12
 </code>
      - ＆GT;
     <code>
 50,8...px
 </code>
    。再次，做计算：
  
  
     <code>
 940 to 100% equals 50,8 to x%
 </code>
      - ＆GT;
     <code>
 x = 6.170212765957447
 </code>
     对于每一列。
  
  
    当然，对其他两个（或更多）视口执行相同操作。
  
  
    希望我？对此...
  
  
    的
      计算示例：
    </强>
  
  
     <code>
 (940px / 100) = (30px / x) // multiply with x
 </code>
      - ＆GT;
  
  
     <code>
 ((940px * x) / 100) = (30px) // multiply with 100
 </code>
      - ＆GT;
  
  
     <code>
 (940px * x) = (3000px) // devide with 940px
 </code>
      - ＆GT;
  
  
     <code>
 x = (3000px / 940px) // cutting the px
 </code>
  
  
     <code>
 x = 3.191489361702128
 </code>
  
  
    注意使用这一点
     <code>
 .
 </code>
     而不是逗号
     <code>
 ,
 </code>
     在你的vars。
  
</DIV>