Question

我有一张卡片，使用尺寸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>

Answer 1

您可以使用CSS media queries来区分两种屏幕尺寸：

E.g：

.col-lg-3 {
    /* styles for 1366x768px screen */
}
@media screen and (min-width: 1920px) and (min-height: 1080px) {
    .col-lg-3 {
        /* styles for screens larger than or equal to 1920px by 1080px */
    }
}

Answer 2

您可以像之前那样做，但需要下载bootstrap 4 sass文件并将_gariables.scss文件中的lg网格断点重置为1080px，如下所示

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

并重新编译整个源代码以获取新的自定义引导程序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使用较少的预处理器我相信它的变量。不包含@ screen-sm：768px; @ screen-md：992px; @ screen-lg：1200px;没有xl所以你可以根据需要进行编辑并重新编译。我认为这应该有用。

col-lg的不同行为

2 个答案: