Bootstrap 4 分钟宽度的流体容器（更改响应行为）答案

【问题标题】：Bootstrap 4 min width fluid container (change responsive behavior)Bootstrap 4 分钟宽度的流体容器（更改响应行为）
【发布时间】：2019-05-20 06:42:57
【问题描述】：

我正在构建一个fluid-container Bootstrap 4 SPA，它只能在桌面上使用。

我正在尝试将最小正文宽度限制为 1200 像素，并在用户将浏览器宽度减小到小于 1200 像素时进行水平滚动，但是，任何大于 1200 像素的尺寸都应该是响应式的。

我尝试了以下方法：

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

和

body { min-width: 1200px; }

但这似乎不起作用，我也尝试将其设置在流体容器上，但效果不佳，所有元素在 1200 像素以下仍然响应。

容器中的列被冻结，但是当大小低于 1200 像素时，受响应行为影响的任何设置仍在变化，这需要停止。

如何在 Bootstrap 4 fluid-container 中实现最小宽度，并让所有元素在其下方无响应？

【问题讨论】：

你能分享你的实际代码吗？（HTML和CSS），流体容器也受到多个断点的影响，所以你必须确保所有的都被覆盖
您使用的元标记用于响应式设计，如果仅适用于 1200px 之类的桌面，您可以简单地使用 <meta name="viewport" content="width=1200"> 我猜
@Manjunath：没有指定其他内容？这并没有改变任何东西！
@Adam 检查我的答案

标签： css bootstrap-4

【解决方案1】：

“容器中的列正在冻结，但是当大小低于 1200 像素时，受响应行为影响的任何设置仍在变化，这需要停止。”

据我所知，您的问题实际上是如何根据 container 宽度而不是 viewport 宽度做出响应行为。如前所述，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

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

AFAIK，获得在 1200 像素以上响应所需结果的唯一方法是使用 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

【讨论】：

注意：根据你的 Codeplay，scss 中的变量应该在包含 Bootstrap 之前

【解决方案2】：

所以事情就是这样，每当我们设计响应性时，我们主要使用自适应来适应设备并隐藏溢出。但尤其是它的overflow-x:hidden。所以你可以在body标签上保留overflow-x:auto，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>

【讨论】：

【解决方案3】：

尝试按如下方式添加媒体查询：

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

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

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

容器中的列被冻结，但是当大小低于 1200 像素时，受响应行为影响的任何设置仍在变化