gpt4 book ai didi

css - col-lg 的不同行为

转载 作者:行者123 更新时间:2023-11-28 16:22:03 28 4
gpt4 key购买 nike

我有一张卡片使用尺寸 3 的 col-lg。但我想要 1920x1080 和 1366x768 显示器的不同行为。但两者仍然是 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

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 1080px,
xl: 1200px
) !default;

并重新编译整个源代码以获得新的自定义 bootstrap CSS 文件。并像这样使用它。

<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

但作为开发人员,不建议这样做。当然,如果你有意想要实现这样的设计,也是可以的。

Bootstrap 3 使用更少的预处理器,我相信它是可变的。less contain @screen-sm: 768px; @screen-md: 992px;@screen-lg: 1200px;没有 xl 所以你可以根据你的需要编辑并重新编译它。我认为这应该可行。

关于css - col-lg 的不同行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49942947/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com