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

Question

我关注 HTML 和 Bootstrap CSS。

<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>

在没有 'min-width' 的情况下，第二列的宽度在某些情况下小于 120 像素并且 'Instance name' 不完全可见。所以我添加了 'min-width' 并且在这种情况下行的宽度变得超过 100%。最后一列换行。

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

Answer 1

您是否尝试更改较小分辨率的值？例如

  <div class="col-lg-4 col-sm-4">Name</div>
  <div class="col-lg-1 col-sm-2">Instance name</div>
  <div class="col-lg-7 col-sm-6">Due date</div>

Bootstrap 有针对不同屏幕尺寸的选项，因此您可能需要查看它们：http://getbootstrap.com/css/

Answer 2

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

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 的宽度。

之前在 Whosebug 上似乎还有另一个类似的问题。看看here.

Bootstrap Grid on W3Schools

Answer 3

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

对于您的示例，我选择了最后一个，"Due date" 通常应该是 column-sm-7。我给它非固定的列大小 "col"，这将填充（灵活增长）可用的 space。在此示例中，它默认有 7 列 space。 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/

也可以手动覆盖 bootstrap 列的弹性属性，例如：给列 'col-sm-1' 和 style="flex-grow: 1; max-width:100%;"

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

min-width for column in Bootstrap grid system

css

grid-layout

responsive-design

twitter-bootstrap