Bootstrap网格以最小的尺寸打破

Question

使用此代码:

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

怎么能修好？

Answer 1

列的宽度不能小于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实用程序类,可用于调整各个元素的填充.例如,我pl-1在最后一列上使用(padding-left)在输入和"text"之间留出一点空间.另一种引导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包装
Bootstrap xs列换行