html - 在 HTML 表格行中使用流畅的 Bootstrap 网格

Question

我有一个占据整个屏幕宽度的表格。在每个表行中，面板内有一个 Bootstrap 3 网格。

问题是表格列太粗无法包含我的 Bootstrap 网格，结果是这样的:

在这里我们看到最后一个按钮与表格行重叠，太过分了。但是如果我切换到我的 24"显示器，不再有这个问题，因为屏幕更宽，因此表格行也更宽。如果我删除一些表格行也是一样的，它们会更宽并且不会重叠。

所以我的问题是:有没有办法拥有一个动态和流畅的网格系统，它会自动排列 Bootstrap 网格，使其不会重叠？

这里有一个 Codepen 来说明这个问题:codepen.io/anon/pen/BKZaWe

我希望面板每行有两个按钮，而不是将四个按钮挤在一起，但如果我们扩大表格或移除一些面板，那么每行将显示 3 或 4 个按钮。

Answer 1

你试过了吗:http://getbootstrap.com/css/#grid-example-fluid ？

<div class="container-fluid">
   <div class="row">
   ...
  </div>
</div>

编辑

我想我现在明白了(从这么小的屏幕截图和没有代码示例来看真的很难)。

在窄视口(viewport)中，按钮比列宽，而您只想让该列保持更宽。

不幸的是，不是它的设计方式。每列都是整个容器宽度的特定百分比 - 与列的内容无关。

取决于您的浏览器支持，Flexbox是这里的完美解决方案。

否则，您将不得不执行以下操作:

  <div class="col-sm-6 col-md-4"> <span> col 1 with buttons <span> </div>
  <div class="col-sm-3 col-md-4"> <span> col 2 <span> </div>
  <div class="col-sm-3 col-md-4"> <span> col 3 <span> </div>

为 sm 视口(viewport)强制第一列变宽。