时间戳

首页 > 解决方案 > 在全球范围内减少 bootstrap 4 中所有内容的大小

css - 在全球范围内减少 bootstrap 4 中所有内容的大小

问题描述

有没有办法在全球范围内将 Bootstrap 4 的所有尺寸减少一定数量？

对于我的桌面管理员来说，常规尺寸有点大。与其从引导程序和自定义类中添加小类来获得我想要的大小，不如我可以更新引导程序中的变量，这将减少各处的大小（填充、边距、字体大小等）。

标签： csstwitter-bootstrapsassbootstrap-4

解决方案

在 Boostrap 4 中：

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

}

这里的字体大小定义为1rem. 在所有 Bootstrap CSS 中，事物的大小都在rem其中root em进行更新：

目前在 Bootstrap 4 中：

:root {
    --blue: #007bff;  
    ... colours ...
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI", ... ,Roboto;
    --font-family-monospace: SFMono-Regular, ... ,monospace
}

*,::after,::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

更新：

在:root或html部分中，您将字体大小设置为设置大小，以 px 为单位，这取决于您要查找的内容：

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
    font-size: 12px; /* for example */
}

或者

:root {
    ...
    ...
    font-size: 12px; /* for example */
}

这会处理所有按钮和 div 以及所有其他元素的填充和边距吗？一个大按钮使用较小的字体会看起来很奇怪。

这将处理 CSS 中大小em或rem单位的所有内容，我没有进行详尽的检查，但看起来它几乎涵盖了所有内容。

推荐阅读