Bootstrap 网格系统中列的最小宽度 [英] min-width for column in Bootstrap grid system
问题描述
我有以下 HTML 和 Bootstrap CSS.
<div class="col-sm-4" style="min-width: 66px;">名称</div><div class="col-sm-1" style="min-width: 120px;">实例名称</div><div class="col-sm-7" style="min-width: 87px;">截止日期</div>
如果没有 'min-width',第二列的宽度在某些情况下会小于 120 像素,并且实例名称"不完全可见.因此,在这种情况下,我添加了 'min-width' 并且行宽超过 100%.最后一列换行.
我想要引导程序动态列宽,并且当我减小浏览器窗口大小时,实例名称不会消失.我怎样才能实现这种行为?
不确定是否有这样的方式来完成您想要的.
col-sm-x
定义了视口的特定宽度百分比,如果您提供自定义值,则所有列的累积宽度将大于或小于 100%,即不是想要的行为.
相反,您可以为同一个 div 提供多个类.示例:
<div class="col-sm-4 col-xs-1">名称</div><div class="col-sm-1 col-xs-3">实例名称</div><div class="col-sm-7 col-xs-2">截止日期</div>
如果这还不够,那么您很可能会想出某种 javascript 解决方案来手动设置其他 div 的宽度.
之前在 stackoverflow 上发布的似乎还有另一个类似的问题.看看这里.
I have following HTML with 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>
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.
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?
Not sure if there is such a way to accomplish what you want.
The col-sm-x
defines 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.
Instead, you can provide multiple classes for the same div. Example:
<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.
There seems to be another, similar question previously posted here on stackoverflow. Have a look here.
这篇关于Bootstrap 网格系统中列的最小宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!