使用此代码:

<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

10-07 18:58
查看更多