引导程序网格系统中的列的最小宽度

我有以下HTML引导程序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>

没有“最小宽度”在一些情况下，第二列的宽度小于120像素“实例名”不是完全可见。所以我在这种情况下添加了“最小宽度”和行宽变得超过100％。最后一列被换成新行。

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

来源

2016-02-03 sasha_trn

难道我的回答解决问题了吗？ – Chris

是的。谢谢。我已经标记为答案。 –

不知道是否有这样的方式来完成你想要的。

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>

如果是这种解决方案是不够的，那么你很可能会拿出一些那种手动设置其他的div宽度的JavaScript解决方案。

似乎还有另一个类似的问题，先前在这里发布在stackoverflow上。看看here。

Bootstrap Grid on W3C

来源

2016-02-03 11:34:52 Chris

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

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

引导具有不同屏幕尺寸的选择，所以你可能要检查出来：http://getbootstrap.com/css/

来源

2016-02-03 11:31:50 Armin

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

对于你的例子，我选择了最后一个，“到期日”，这通常应该是列-sm-7。我将它缩小为col-sm-1，但给它弹性增长，我们必须覆盖bootstraps max-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-sm-1" style="min-width: 87px; flex-grow: 1; max-width:100%; ">Due date</div> 
</div>

这里是一个非常codepen我做：https://codepen.io/timar/pen/VQWmQq/

来源

2018-02-12 20:47:14

引导程序网格系统中的列的最小宽度

回答

相关问题