如何设置列高度 - Bootstrap 4？ [英] How to Set Column Heights - Bootstrap 4?
问题描述
我正在玩bootstrap 4，我不确定如何正确地获得我的身高。我有一个side nav，header，main和footer。
我想要main占据大部分高度。然而，由于某种原因，我的高度一定会被弄乱，因为侧面的中殿并没有完全放下，我在左下角得到了这个白色的块。
如果您在我的代码上进行全屏显示，您会看到它。
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;最大宽度：80px; text-align：center; margin-left：-80px！important; }
<！DOCTYPE html>< html> < HEAD> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1.0> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> <标题>试验< /标题> <！ - Bootstrap CSS CDN - > <！ - < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> - > < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.cssintegrity =sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshbcrossorigin =anonymous > <！ - 我们的自定义CSS - > < link rel =stylesheethref =style4.css>< / head>< body> < div class =wrapper h-100> <！ - 侧栏支架 - > < nav id =sidebar> < div class =sidebar-header> < h3> Bootstrap Sidebar< / h3> < / DIV> < ul class =list-unstyled components> <李> < a取代;主页< / a> < /锂> < / UL> < / NAV> < div class =container-fluid> < div class =row h-100> < div class =col-12style =background-color：red;>三列之一< / div> < main class =col-12 h-100style =background-color：yellow;>测试< / main> < div class =col-12style =background-color：pink;> test2< / div> < / DIV> < / DIV> < / div>< / body>< / html>
解决方案目前的问题是在行上使用 h-100 >使得 col-12 也被设置为 h-100 的子元素超过了导致滚动和空白的视口高度。
$ b 从 Bootstrap 4.1 中，有一个
flex-fill 对于这种布局有帮助的util类... .flex-fill {
flex：1 1 auto;
$ b在这种情况下，你可以使用它来让子div增长到填充剩余高度。在 .wrapper 中设置最小高度： .wrapper {
最小高度：100vh;
}
然后，使 container-fluid 也是一个flexbox容器（使用 d-flex ）。使用util flex-fill 使行和中间 col-12 填充高度：
< div class =wrapper d-flex>
<！ - 侧边栏固定器 - >
< nav id =sidebar>
< div class =sidebar-header>
< h3> Bootstrap Sidebar< / h3>
< / div>
< ul class =list-unstyled components>
< li>
< a>
主页
< / a>
< / li>
< / ul>
< / nav>
< div class =container-fluid d-flex flex-column>
< div class =row flex-fill flex-column>
< div class =col-12style =background-color：red;>
三列之一
< / div>
test
< / main>
< div class =col-12style =background-color：pink;>
test2
< / div>
< / div>
< / div>
< / div>
https://www.codeply.com/go/VvogWj44cS
I am playing around with bootstrap 4 and I am not sure how to get my heights correctly. I have a "side nav", "header", "main" and "footer".
I want "main" to take up most of the height. However for some reason my heights must be messed up as the side nave does not go all the way down and I got this white chunk in the bottom left hand corner.
If you do full screen on my code you will see it.
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>
解决方案 The problem currently is the that using h-100 on the row, makes the child col-12 also set to h-100 exceed the viewport height which causes scrolling and the whitespace under the sidebar.
As of Bootstrap 4.1, there is a flex-fill util class that is helpful for this layout...
.flex-fill {
flex: 1 1 auto;
}
In this case, you can use it so that the child divs grow to fill remaining height. Just set min-height on the .wrapper:
.wrapper {
min-height: 100vh;
}
And then, make container-fluid also a flexbox container (using d-flex). Use the util flex-fill to make row and the middle col-12 fill height:
<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
这篇关于如何设置列高度 - Bootstrap 4？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
