英文:
Why does viewport unit sizing change when Bootstrap isn't loaded?
问题
在删除import 'bootstrap/dist/css/bootstrap.min.css';这一行之前和之后，在同一个窗口显示网页页面中设置为height: 100vh的相同元素，报告的客户端高度不同：在导入该行时为881，不导入该行时为914。
我很久之前将Bootstrap添加到项目中，但最终没有使用任何提供的实际元素，所以我删除了npm文件和import 'bootstrap/dist/css/bootstrap.min.css';。
不知何故，这导致了vh和vmin值的更改，导致应用程序主体被拉伸，并且页面开始显示滚动条，以及字体大小调整函数（与我的vmin相关字体大小一起使用）开始出现问题。
在删除这一行之前：
import 'bootstrap/dist/css/bootstrap.min.css';
在删除这一行之后：
该应用程序由一个单一页面组成，应该完全适合窗口，以及一组小部件和图像的网格，所有内容都根据窗口大小进行缩放，使用vmin、vh或vw。
更改这一行，这是我的项目中唯一与Bootstrap相关的痕迹，确实扰乱了内部工作原理。我想知道发生了什么事情，bootstrap.min.css向项目添加了什么内容，我是否可以手动添加它而不带上整个库。
最小代码示例：
App.js
import './App.css';
/* import 'bootstrap/dist/css/bootstrap.min.css'; */
function App() {
return (
<>
<div className="App">
<div className="App-body" id='body'>
Hi
</div>
</div>
</>
);
}
export default App;
App.css
.App {
text-align: center;
margin: 0%;
}
.App-body {
background-color: #3c4558;
display: grid;
grid: 5.9% 12.6% 3.7% 9.8% 11.7% 17.5% 7.3% 22.4% / 15% 10% 22% 22% 23.5%;
padding: 1.3%;
gap: 1.3%;
margin: 0%;
height: 100vh; /*这真的很奇怪*/
font-size: calc(10px + 2vmin);
color: white;
}
英文:
The same element(set to height:100vh) in the same window showing the website page, before and after deleting the import line reports different client height: 881 with the import, 914 without the import
I added bootstrap to the project a long time ago and never ended up using any of the actual elements provided, so i deleted the npm file and the import 'bootstrap/dist/css/bootstrap.min.css';
Somehow that changed the vh and vmin values such that the app body has stretched and the page began showing the scrollbar, as well as the font-sizing function (which works with fudges my vmin-dependent font sizes) has begun going haywire
Before deleting the
import 'bootstrap/dist/css/bootstrap.min.css';
>!
The app consists of a single page which is supposed to fit the window exactly and a grid of widgets and images, everything scaling off of the window size through vmin or vh or vw.
Changing this one line, which is the only trace of Bootstrap in my project, has really upended the internal workings. I am wondering what happened, what was the bootstrap.min.css adding to the project and can i manually put it back in without carrying the whole library with me
Minimal code example:
App.js
import './App.css';
/* import 'bootstrap/dist/css/bootstrap.min.css'; */
function App() {
return (
<>
<div className="App">
<div className="App-body" id='body'>
Hi
</div>
</div>
</>
);
}
export default App;
App.css
.App {
text-align: center;
margin: 0%;
}
.App-body {
background-color: #3c4558;
display: grid;
grid: 5.9% 12.6% 3.7% 9.8% 11.7% 17.5% 7.3% 22.4% / 15% 10% 22% 22% 23.5%;
padding: 1.3%;
gap: 1.3%;
margin: 0%;
height: 100vh;/*this is REALLY weird*/
font-size: calc(10px + 2vmin);
color: white;
}
答案1
得分: 1
这似乎是与box-sizing有关的问题，它定义了填充是否被包含在height和width值中，或者添加到它们中。
尝试添加 * {box-sizing: border-box;}，这会将填充包含在所有元素的值中。
英文:
That sounds like an issue with box-sizing which defines whether padding is included in height and width values or added to them.
Try to add * {box-sizing: border-box;} which includes padding in these values for all elements.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论