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＆amp; 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 utility classes个类，可用于调整各个元素的填充。例如，我在最后一列使用了pl-1（padding-left），在输入和“text”之间留出了一点空间。另一个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

Answer 2

你冤枉了<div>标签

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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>

＆＃13;

Bootstrap网格以最小的尺寸打破

2 个答案: