col-lg的不同行为 [英] Different behaviours for col-lg
问题描述
我有一张卡片,卡片大小为3。但是我想要显示器1920x1080和1366x768的行为不同。
I have a card that uses size 3 for col-lg. But I want a different behaviour for monitors 1920x1080 and 1366x768. But both are still col-lg.
例如:
- col- 1g-2920x1080 = col-IgG
- col-1g-1366x768 = col-IgG
<div class="catalogo">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>
推荐答案
您可以执行与之前相同的操作,但需要下载bootstrap 4 sass文件,然后像这样将lg网格断点从_variables.scss文件重置为1080px
You can do same as you were doing earlier but need to download the bootstrap 4 sass file and reset lg grid breakpoint from _variables.scss file to 1080px like this
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 1080px,
xl: 1200px
) !default;
并重新编译整个源代码以获得新的自定义引导CSS文件。
并像这样使用它。
and recompile the entire source to get new custom bootstrap CSS file. and use it like this.
<div class="catalogo">
<div class="row">
<div class="col-12 col-md-6 col-lg-3 "> </div>
</div>
</div>
这是您需要更改的文件。
https://github.com/twbs/ bootstrap / blob / v4-dev / scss / _variables.scss
This is the file you need to change. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
但是作为开发人员,不建议这样做。但是,当然,如果您故意要实现这种设计也是可能的。
But as a developer this is not recommended. But of course, it is possible if you deliberately want to achieve such kind of design.
Bootstrap 3使用的预处理器更少,我相信它是变量。更少包含@ screen-sm: 768px; @ screen-md:992px; @ screen-lg:1200px;没有xl,因此您可以根据需要进行编辑并重新编译。我认为这应该可行。
Bootstrap 3 uses less preprocessor I believe it's variable.less contain @screen-sm: 768px; @screen-md: 992px;@screen-lg: 1200px; no xl so you can edit according to your need and recompile it. I think this should work.
这篇关于col-lg的不同行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!