gpt4 book ai didi

html - 如何设置列高 - Bootstrap 4?

转载 作者:行者123 更新时间:2023-11-28 15:05:00 24 4
gpt4 key购买 nike

我正在玩 bootstrap 4,我不确定如何正确获得我的高度。我有一个“side nav”、“header”、“main”和“footer”。

我希望“main”占据大部分高度。然而,由于某种原因,我的高度一定是搞砸了,因为侧殿并没有一直向下,我在左下角得到了这个白色的 block 。

如果你全屏显示我的代码,你会看到它。

body,
html,
.container-fluid {
height: 100%;
}

.wrapper {
display: flex;
align-items: stretch;
}

#sidebar {
background-color: blue;
color: white;
}

@media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>test</title>

<!-- Bootstrap CSS CDN -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style4.css">
</head>

<body>
<div class="wrapper h-100">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>

<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>

<div class="container-fluid ">
<div class="row h-100">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 h-100" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
</body>

</html>

最佳答案

目前的问题是在上使用h-100,使得子col-12也设置为 h-100 超出视口(viewport)高度,导致滚动和侧边栏下方的空白区域。

Bootstrap 4.1 开始,有一个 flex-fill util 类对这种布局很有帮助...

.flex-fill {
flex: 1 1 auto;
}

在这种情况下,您可以使用它让子 div 增长以填充剩余高度。只需在 .wrapper 上设置最小高度:

.wrapper {
min-height: 100vh;
}

然后,使 container-fluid 也是一个 flexbox 容器(使用 d-flex)。使用 util flex-fill 使 row 和中间的 col-12 填充高度:

<div class="wrapper d-flex">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid d-flex flex-column">
<div class="row flex-fill flex-column">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 flex-fill" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>

https://www.codeply.com/go/VvogWj44cS

关于html - 如何设置列高 - Bootstrap 4?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49585435/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com