Bootstrap网格系统中列的最小宽度[重复]答案

【问题标题】：min-width for column in Bootstrap grid system [duplicate]Bootstrap网格系统中列的最小宽度[重复]
【发布时间】：2016-05-12 13:43:10
【问题描述】：

我使用 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%。最后一列被换行。

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

【问题讨论】：

标签： css twitter-bootstrap responsive-design grid-layout

【解决方案1】：

引导列是弹性项目。您必须决定当其他列达到最小宽度时应该缩小的一列。

对于您的示例，我选择了最后一个“到期日期”，通常应该是 column-sm-7。我给它非固定的列大小“col”，它将填充（flex-grow）可用空间。在此示例中，默认情况下它将有 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，例如：gving 列 'col-sm-1' 和 style="flex-grow: 1; max-width:100%;"

【讨论】：

这应该是答案。
谢谢！ class="col" 就是答案。

【解决方案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 的宽度。

似乎之前在 stackoverflow 上发布了另一个类似的问题。看看here。

Bootstrap Grid on W3Schools

【讨论】：

【解决方案3】：

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

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

【讨论】：