Bootstrap 网格系统中列的最小宽度

Question

我使用 Bootstrap CSS 跟踪 HTML。

 <div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col-sm-7" style="min-width: 87px;">Due date</div>
</div>

如果没有“最小宽度”，在某些情况下第二列的宽度小于 120 像素，并且“实例名称”不完全可见。所以我添加了“最小宽度”并且在这种情况下，行的宽度变得超过 100%。最后一列换行。

我想要引导动态列宽，并且当我减小浏览器窗口大小时该实例名称不会消失。我怎样才能实现这种行为？

原文由 sasha_trn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不确定是否有这样的方法来完成你想要的。

col-sm-x 定义了视口的特定宽度百分比，如果您提供自定义值，那么所有列的累积宽度将大于或小于 100%，这不是所需的行为。

相反，您可以为同一个 div 提供多个类。例子：

 <div class="row">
  <div class="col-sm-4 col-xs-1">Name</div>
  <div class="col-sm-1 col-xs-3">Instance name</div>
  <div class="col-sm-7 col-xs-2">Due date</div>
</div>

如果这个解决方案还不够，那么您很可能会想出某种 javascript 解决方案来手动设置其他 div 的宽度。

stackoverflow 上似乎还有另一个类似的问题。看看 这里。

W3Schools 上的引导网格

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Bootstrap 列是弹性项目。您必须决定一列在其他列达到最小宽度时应该收缩。

对于你的例子，我选择了最后一个，“截止日期”，通常应该是 column-sm-7。我给它非固定的列大小“col”，它将填充（弹性增长）可用空间。在此示例中，它默认有 7 列空间。 12 columns - 4 columns - 1 column = 7 columns

更重要的是，当其他列达到其最小宽度时，它会开始缩小。

 <div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col" style="min-width: 87px;">Due date</div>
</div>

这是我制作的代码笔： https ://codepen.io/timar/pen/VQWmQq/

也可以手动覆盖引导列 flex-properties，例如：给列 'col-sm-1' 和 style="flex-grow: 1; max-width:100%;"

原文由 Timar Ivo Batis 发布，翻译遵循 CC BY-SA 4.0 许可协议