使用此代码:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2">
text
</div>
</div>
</div>
如果将窗口大小调整为最小,则网格将断开。
这是Bootply链接。
只要打开预览并将窗口大小调整到最小,网格就会断开。
3列必须保持在同一行中,但以最小的大小,最后一列将移到下一行。
这在两个版本中都会发生(4和3.7(col-xs-2))
怎么能解决这个问题?
最佳答案
列的宽度不能小于30px(由于填充),因此,随着屏幕宽度的缩小,列最终会自动换行(垂直堆叠)。要防止这种情况,请调整row
中列的填充。bootstrap 4为此目的有一个no-gutters
类…
https://www.codeply.com/go/XaBsD5AhJG
<div class="container">
<div class="row no-gutters">
<label class="col-2 col-form-label">Email</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
<div class="col-2 pl-1">
text
</div>
</div>
</div>
bootstrap 4还具有padding utility classes类,可用于调整单个元素上的填充。例如,我在最后一列使用
pl-1
(左填充)在输入和“文本”之间留出一点空间。另一个bootstrap 4选项是在flex-nowrap
上使用row
,这将防止出现溢出时包装和创建水平滚动。在bootstrap 3中,需要添加css来调整填充。
.no-gutters {
margin-right: 0;
margin-left: 0;
}
.no-gutters>[class*=col-] {
padding-right: 0;
padding-left: 0;
}
相关的
Bootstrap col-xs wrapping
Bootstrap xs columns wrap