html - Bootstrap/浏览器宽度计算问题

我的行宽是 1080，所以理想情况下每个 col-md-1 都是

1080/12 = 90 像素

但是 col-md-8 宽度显示为 750px ，理想情况下应该是 720px

与 col-md-4 相同的问题，它显示为 390px，而不是 360px。

div 上也没有定义额外的填充。

enter image description here

这会强制 col-md-4 显示在下一行而不是同一行。我做错了什么？

编辑

感谢您的回复，但您在这里遗漏了一个重要的注意事项，当您将 col-md-8 和 col-md-4 的宽度相加时，它将等于行宽。但这里不是这种情况。

750px (col-md-8) + 390px (col-md-4) != 1080px(row) 它的总和为 1140，这就是为什么 col-md 被推到下一行的原因。

最佳答案

这就是响应式网格系统的工作原理。 Bootstrap 添加了 -15 像素(左右)的行边距和 15 像素的左右边距列。

720px + 15px(列左填充)+ 15px(列右填充)= 750px。一旦你把它排成一行，每边边距为 -15px，你就回到了 720px。

您可以“通过将容器类更改为流体类，将固定宽度的网格布局变成全宽网格布局”:( http://getbootstrap.com/css/#grid-options )

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
  </div>
</div>

这里要看的更重要的问题。如果您担心特定的像素宽度，是否需要响应式布局？

关于html - Bootstrap/浏览器宽度计算问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28484631/