Bootstrap网格系统中列的最小宽度 [英] min-width for column in Bootstrap grid system

问题描述

我有带有Bootstrap CSS的HTML.

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>

在没有最小宽度"的情况下，第二列的宽度在某些情况下小于120px，并且实例名称"不完全可见.因此，在这种情况下，我添加了最小宽度"，行的宽度超过100％.最后一列被换行.

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.

col-sm-x <​​/code>定义视口的特定宽度百分比，如果您提供自定义值，则所有列的累计宽度将大于或小于100％，即不是期望的行为.

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.

相反，您可以为同一个div提供多个类.示例:

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>

如果此解决方案不够用，那么您很可能会想出一种可以手动设置其他div宽度的javascript解决方案.

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.

以前在stackoverflow上似乎还有另一个类似的问题.在此处.

There seems to be another, similar question previously posted here on stackoverflow. Have a look here.

W3Schools上的Bootstrap网格

这篇关于Bootstrap网格系统中列的最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！