Bootstrap 网格以最小尺寸中断

网格以最小尺寸中断

关注

发信

关注(28)粉丝(399)

本文介绍了Bootstrap 网格以最小尺寸中断的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用此代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><div class="容器"><div class="row"><label class="col-2 col-form-label">电子邮件</label><div class="col-8"><input type="text" class="form-control">

<div class="col-2">文本

如果您将窗口调整为最小尺寸，网格会中断.

这是 Bootply 链接.

只需打开预览并将窗口调整为最小尺寸，网格就会中断.

3 列必须保持在同一行，但在最小尺寸时，最后一列移至最底行.

这在两个版本中都会发生 (4 & 3.7 (col-xs-2))

如何解决这个问题?

解决方案

列的宽度不能缩小到小于 30 像素(由于填充)，因此，随着屏幕宽度变窄，列最终会环绕(垂直堆叠).为防止出现这种情况，请调整 row 内列的内边距.Bootstrap 4 有一个 无排水沟 类用于此目的...

https://codeply.com/go/XaBsD5AhJG


<div class="row no-gutters"><label class="col-2 col-form-label">Email</label><div class="col-8">
<div类=col-2 pl-1">文本

Bootstrap 4 还具有填充实用程序类可用于调整单个元素的填充的类.例如，我在最后一列使用 pl-1(padding-left) 在输入和文本"之间留出一点空间.另一个 Bootstrap 4 选项是在 row 上使用 flex-nowrap，这将防止在溢出时换行和创建水平滚动.

在Bootstrap 3中，您需要添加CSS来调整内边距.

.no-gutters {右边距:0;左边距:0；}.no-gutters>[class*=col-] {填充右:0;填充左:0;}

相关
引导 col-xs 包装
 Bootstrap xs 列换行

Using this code:

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

If you resize the window to the smallest size, the grid breaks.

Here is the Bootply link.

Just open the preview and resize your window to the smallest size, and the grid will break.

3 columns must stay in the same row, but in the smallest size, the last column shifts to the bottom row.

This happens in both versions (4 & 3.7 (col-xs-2))

how can this be fixed?

解决方案

The columns can't shrink in width less than 30px (due to padding) so, as screen width narrows, eventually the columns wrap (stack vertically). To prevent this, adjust the padding on the columns inside the row. Bootstrap 4 has a no-gutters class for this purpose...

https://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 also has padding utility classes classes that can be used to adjust padding on individual elements. For example, I used pl-1(padding-left) on the last column to give a little space between the input and "text". Another Bootstrap 4 option is to use flex-nowrap on the row which will prevent wrapping and creating horizontal scrolling when there is overflow.

In Bootstrap 3, you need to add CSS to adjust the padding.

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

这篇关于Bootstrap 网格以最小尺寸中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-23 01:34