我正在构建一个模拟网站，但我的 CSS 已经生锈了。我容器中的行占用了很多高度。在我的第二行中，我希望它的位置正好在该行的下方，但它最终出现在页面的末尾。我该如何解决这个问题？
html {
width: 100%;
height: 100%;
}
.container-fluid {
overflow: hidden;
}
.desk {
width: 100vw;
height: 70vh;
}
.book {
flex-direction: flex-start;
position: absolute;
width: 10vw;
height: 10vh;
}
.logo {
position: absolute;
top: 10vh;
font-family: 'Roboto', sans-serif;
}
.search {
padding-left: 75vw;
bottom: 65vh;
}
.popular {
margin: 0 auto;
bottom: 30px;
}<body>
<div class="container-fluid">
<div class="row">
<img src="./images/desk.png" class="desk">
<div class="col book">
<img src="./images/book.png" class="book">
<h1 class="logo">Etomon</h1>
</div>
<div class="col search">
<input type="text" class="" placeholder="Search?">
<button type="submit">Submit</button>
<form>
subject/course <br>
<input type="text" placeholder="Graphic Design"> <br> level <br>
<input type="text" placeholder="Intermediate"> <br> starting <br>
<input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
<input type="text" placeholder="mm/dd/yyy"> <br>
<button type="submit">Submit</button>
</form>
</div>
</div>
<div class="row">
<h1 class="popular">Most Popular Subjects</h1>
</div> 
有没有办法在 bootstrap 中控制高度，或者我的 html 和 css 布局有问题？
最佳答案
Bootstrap 行旨在与列结合使用。因此，如果您将元素放入 Bootstrap row 但没有放入该行内的 col 或者如果您没有 col那一行，那将不可避免地把事情搞砸。
哦，您尝试做的所有事情都可以单独使用 native Bootstrap 类来完成。不使用任何自定义 CSS。
这里有一个片段，在这种情况下应该使用超大屏幕引导您朝正确的方向前进，因为我认为这是最合适的:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#hero {
background: url("https://picsum.photos/1280/710") no-repeat center;
background-size: cover;
}
</style>
<div class="jumbotron jumbotron-fluid" id="hero">
<div class="container">
<!--
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-->
<div class="row">
<div class="col-12 col-md-7 mb-4 book">
<img src="https://picsum.photos/180/120" class="book">
<h1 class="logo h2 text-light" style="margin-top: -50px;">Etomon</h1>
</div>
<div class="col search">
<input type="text" class="" placeholder="Search?">
<button type="submit">Submit</button>
<form>
subject/course <br>
<input type="text" placeholder="Graphic Design"> <br> level <br>
<input type="text" placeholder="Intermediate"> <br> starting <br>
<input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
<input type="text" placeholder="mm/dd/yyy"> <br>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h1 class="popular text-center">Most Popular Subjects</h1>
</div>
</div>
</div>关于html - 我的行占据了太多的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48346240/