Question

我正在构建fluid-container Bootstrap 4 SPA，仅在台式机上使用。

如果用户将浏览器的宽度减小到小于1200px，我试图将最小主体宽度限制为1200px，但是可以进行水平滚动，但是，任何大于1200px的尺寸都应该响应。

我尝试了以下操作：

<meta name="viewport" content="width=device-width, initial-scale=1">

和

body { min-width: 1200px; }

但是这似乎没有用，我还尝试将其设置在流体容器上，但效果不佳，并且所有元素在1200px以下仍然可以响应。

容器中的列处于冻结状态，但是当大小低于1200px时，任何受响应行为影响的设置仍会更改，这需要停止。

如何在Bootstrap 4 fluid-container中实现最小宽度，并使所有元素在此以下都不响应？

Answer 1

尝试一下：

.custom {
  min-width: 1200px;
  overflow: scroll;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid custom">
  <div class="row">
    <div class="col-6">
      Hello
    </div>
    <div class="col-6">
      Hello
    </div>
  </div>
</div>

Answer 2

“容器中的列处于冻结状态，但是当大小低于1200px时，任何受响应行为影响的设置仍会更改，这需要停止。”

据我所知，您的问题确实是如何基于容器宽度而不是视口宽度做出响应行为>。如前所述，this isn't really possible是因为Bootstrap的响应行为使用@media查询。

您的原始问题，要求设置最小容器宽度。使用这样的自定义容器元素是最简单的：

.container-1200 {
  width: 100%;
  min-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

https://www.codeply.com/go/CUAh9pgRpu

但是，这不会影响其他响应行为，例如列宽，响应对齐，flexbox等。因为您没有更改Bootstrap的响应断点。

AFAIK，要获得 1200px以上的响应的理想结果的唯一方法是使用SASS自定义Bootstrap的断点。您会将xl下的所有断点覆盖为最小宽度1px。这将使所有较小的断点（xs，sm，md和lg）表现相同（无响应），并且xl仍将具有响应性。

$grid-breakpoints: (
  xs: 0,
  sm: 1px,
  md: 1px,
  lg: 1px,
  xl: 1200px
);

然后设置容器宽度...

$container-max-widths: (
  xs: 1200px,
  sm: 1200px,
  md: 1200px,
  lg: 1200px,
  xl: 100%
);

最后，您有一个单个断点1200px：

演示：https://www.codeply.com/go/gnwTNZFYV2

相关：

How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?
How to create new breakpoints in bootstrap 4 using CDN?

Answer 3

尝试如下添加媒体查询：

@media (max-width:1201px) {
    body{
        min-width:1200px;
        overflow-x:scroll;
    }
}

在媒体查询中使用1201px来避免覆盖。

Answer 4

这就是问题所在，每当我们设计响应能力时，我们通常都会使用自适应技术来适应设备并隐藏溢出。但尤其是其overflow-x:hidden。因此，您只需将overflow-x:auto保留在body标签上，即可min-width对其进行修复。

body {
  min-width: 1200px;
  overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        Hello Bootstrap 4
      </div>
    </div>
  </div>

Bootstrap 4分钟宽的流体容器（响应变化行为）

4 个答案: