我希望 #intro div 具有 90% 的窗口高度。但是当我在 css 中设置它时，它会弄乱网格。当我最小化浏览器窗口时，“关于我”部分会堆叠并覆盖“我做什么”部分和三个较低的列。但是，当我从 css 中删除高度设置时，一切正常。有没有办法让 row1 的高度达到 90% 并且不破坏响应能力？
这是我的 CSS 代码:https://jsfiddle.net/yjakg7rL/
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Test resume page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Boostrap_css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!--Bootstrap_js-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!--custom CSS-->
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<div id="intro" class="container-fluid">
<div class="row row1">
<div class="col-md-4 column1">
<img src="dva.jpg" class="rounded-circle img-responsive dva" alt="Gamer-grill" width="200" height="200">
<h3>Name/surname</h3>
<p>MEKA pilot. Top trash tier web dev</p>
</div>
<div class="col-md-8 column2">
<h3>About me</h3>
<p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
</div>
</div>
</div>
<div class="container-fluid">
<h3>What I do?</h3>
<p> I'm eating ults. Omnomnomnomn. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="row exp">
<div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
</div>
<div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
</div>
<div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p>
</div>
</div>
</body>
</html>
最佳答案
Bootstrap 有自己的类和自己的设置大小，您需要修改那里的 CSS 类以进行适当的更改。
查看文档: https://getbootstrap.com/docs/4.0/getting-started/introduction/
关于html - Bootstrap div高度设置打破网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46797425/