有没有办法在全局范围内将 Bootstrap 4 的所有尺寸减小一定量?
常规大小对于我的桌面管理员来说有点大。我可以更新 Bootstrap 中的变量,而不是从 Bootstrap 和自定义类中添加小类来获得我想要的大小,这将减少所有地方的大小(填充、边距、字体大小等)。
最佳答案
在 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
单位大小的所有内容,我没有进行详尽检查,但看起来它几乎涵盖了所有内容.
关于css - 全局减小 bootstrap 4 中所有内容的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60868484/