CSS Bootstrap 网格系统中列的最小宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35175722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
min-width for column in Bootstrap grid system
提问by sasha_trn
I have following HTML with Bootstrap CSS.
我使用 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>
Without 'min-width' a width of the second column in some cases is less than 120px and 'Instance name' isn't fully visible. So that I've added 'min-width' and width of row becomes more than 100% in that cases. The last column is wrapped into new line.
如果没有 'min-width'，在某些情况下第二列的宽度小于 120px 并且 'Instance name' 不完全可见。因此，在这种情况下，我添加了 'min-width' 并且行宽超过 100%。最后一列换行。
I want to have bootstrap dynamic column width and that Instance name doesn't disappeared when I reduce browser window size. How can I achieve such behavior?
我想要引导程序动态列宽，并且当我减小浏览器窗口大小时，实例名称不会消失。我怎样才能实现这种行为？
采纳答案by Chris
Not sure if there is such a way to accomplish what you want.
不确定是否有这样的方法来完成你想要的。
The col-sm-xdefines specific width percentages of your viewport, and if you provide custom values, then the accumulated width of all columns will either be more or less than 100%, which is not the desired behaviour.
该col-sm-x定义特定宽度视口的百分比，如果你提供自定义值，那么所有列的宽度积累要么是大于或小于100％，这是不期望的行为。
Instead, you can provide multiple classes for the same div. Example:
相反，您可以为同一个 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>
If this is solution does not suffice, then you will most likely come up with a javascript solution of some sort that manually sets the width of the other divs.
如果这还不够，那么您很可能会想出某种 javascript 解决方案来手动设置其他 div 的宽度。
There seems to be another, similar question previously posted here on stackoverflow. Have a look here.
之前似乎在 stackoverflow 上发布了另一个类似的问题。看看这里。
回答by Timar Ivo Batis
Bootstrap columns are flex items. You have to decide on one column which should shrink when the others have reached their min-width.
Bootstrap 列是弹性项目。您必须决定当其他列达到最小宽度时应缩小的一列。
For your example i chose the last one, "Due date" which normaly should be column-sm-7.
I give it the non-fixed column size "col", which will fill (flex-grow) the available space. In this example it would by default have 7 columns of space. 12 columns - 4 columns - 1 column = 7 columns
对于您的示例，我选择了最后一个“截止日期”，通常应该是 column-sm-7。我给它一个非固定的列大小“col”，它将填充（flex-grow）可用空间。在这个例子中，它默认有 7 列空间。12 columns - 4 columns - 1 column = 7 columns
More importantly though it will start shrinking when the other columns reached their min-width.
更重要的是，当其他列达到其最小宽度时，它会开始缩小。
<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>
here is a codepen i made: https://codepen.io/timar/pen/VQWmQq/
这是我制作的代码笔：https://codepen.io/timar/pen/VQWmQq/
what is also possible is to manually override the bootstrap column flex-properties like: gving the column 'col-sm-1'and style="flex-grow: 1; max-width:100%;"
也可以手动覆盖引导列的 flex-properties，例如：gving 列'col-sm-1'和style="flex-grow: 1; max-width:100%;"
回答by Armin
Did you try changing your values for smaller resolutions? For example
您是否尝试更改较小分辨率的值？例如
<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 has options for different screen sizes, so you might want to check them out: http://getbootstrap.com/css/
Bootstrap 有适用于不同屏幕尺寸的选项，因此您可能需要查看它们：http: //getbootstrap.com/css/
