css - 全局减小 bootstrap 4 中所有内容的大小

Question

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

常规大小对于我的桌面管理员来说有点大。我可以更新 Bootstrap 中的变量，而不是从 Bootstrap 和自定义类中添加小类来获得我想要的大小，这将减少所有地方的大小(填充、边距、字体大小等)。

Answer 1

在 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 */
}

---

Will that take care of all buttons and divs and all other element paddings and margins? A large button will look weird with a smaller font size.

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