Bootstrap 4 min宽的流体容器(响应变化行为) [英] Bootstrap 4 min width fluid container (change responsive behavior)
问题描述
我正在构建仅在台式机上使用的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中实现最小宽度，并使所有元素在此以下都不响应?
容器中的列处于冻结状态，但是当大小低于1200px时，受响应行为影响的任何设置仍在更改，这需要停止."
据我所知，您的问题确实是如何基于容器宽度而不是视口宽度做出响应行为>.如前所述，这不是真的不可能，因为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
相关:
如何使用SASS为不同的网格列和断点自定义Bootstrap 4?
如何使用CDN在bootstrap 4中创建新的断点?
I am building a fluid-container Bootstrap 4 SPA that will only be used on desktop.
I am trying to restrict the min body width to 1200px and have a horizontal scroll if the user reduces their browser width to less than 1200px, however, any size bigger than 1200px should be responsive.
I tried the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
and
body { min-width: 1200px; }
But that didn't seem to work, I have also tried setting it on the fluid-container, but didn't work as well and all the elements were still responsive below 1200px.
The columns within the container are freezing but any setting that is affected by responsive behaviour is still changing when the size goes below 1200px, this needs to stop.
How do you achieve min width in Bootstrap 4 fluid-container and have all the elements acting non-responsive below that?
"The columns within the container are freezing but any setting that is affected by responsive behaviour is still changing when the size goes below 1200px, this needs to stop."
As far as I can tell, your question is really how to make responsive behavior based on the container width, and not the viewport width. As answered before, this isn't really possible because Bootstrap's responsive behaviors use @media queries.
Your original question of setting a min container width has already been answered. It's simplest to use a custom container element like this:
.container-1200 {
width: 100%;
min-width: 1200px;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;
}
https://www.codeply.com/go/CUAh9pgRpu
However, this won't effect other responsive behaviors like column width, responsive alignment, flexbox, etc.. because you're not changing Bootstrap's responsive breakpoints.
AFAIK, the only way to get the desired result of responsive above 1200px would be to customize Bootstrap's breakpoints using SASS. You'd override all the breakpoints under xl to 1px min-width. This will make all the smaller breakpoints (xs,sm,md an lg) behave the same (non-responsive), and xl will still be responsive.
$grid-breakpoints: (
xs: 0,
sm: 1px,
md: 1px,
lg: 1px,
xl: 1200px
);
Then set the container width...
$container-max-widths: (
xs: 1200px,
sm: 1200px,
md: 1200px,
lg: 1200px,
xl: 100%
);
In the end, you have a single breakpoint of 1200px:
Demo: https://www.codeply.com/go/gnwTNZFYV2
Related:
How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?
How to create new breakpoints in bootstrap 4 using CDN?
这篇关于Bootstrap 4 min宽的流体容器(响应变化行为)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
