col-lg 的不同行为
Different behaviours for col-lg
我有一张 col-lg 使用尺寸 3 的卡片。但我想要 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>
您可以使用CSS media queries来区分两种屏幕尺寸:
例如:
.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 */
}
}
您可以像之前那样做,但需要下载 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 使用较少的预处理器我相信它是 variable.less 包含 @screen-sm: 768px; @screen-md: 992px;@screen-lg: 1200px;没有 xl 所以你可以根据你的需要编辑并重新编译它。我认为这应该有效。
我有一张 col-lg 使用尺寸 3 的卡片。但我想要 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>
您可以使用CSS media queries来区分两种屏幕尺寸:
例如:
.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 */
}
}
您可以像之前那样做,但需要下载 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 使用较少的预处理器我相信它是 variable.less 包含 @screen-sm: 768px; @screen-md: 992px;@screen-lg: 1200px;没有 xl 所以你可以根据你的需要编辑并重新编译它。我认为这应该有效。