gpt4 book ai didi

javascript - 如何使 Bootstrap 网格列成为页面的全高?

转载 作者:太空狗 更新时间:2023-10-29 14:38:45 24 4
gpt4 key购买 nike

我正在尝试使用 Bootstrap Grid 制作侧边栏,但我希望它一直延伸到底部。 Image of what I am trying to accomplish.

我不想破坏响应能力并尽可能避免使用 Javascript 解决方案。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Footer CSS */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #3e8f3e;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-10" style="background-color: #f5e79e">
Column that does not need to stretch
</div>
<div class="col-md-2" style="background-color: #ffff00;">
Sidebar/column to stretch down to the bottom (to the footer)
</div>
</div>
</div>

<footer class="footer">
<div class="container-fluid">
<h5>Footer to reach down too</h5>
</div>
</footer>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

代码也可以在 jsfiddle.net 上找到这可能会更容易使用。确保你拖动结果,这样网站就不会显示列在彼此下方的移动版本。

感谢任何帮助,因为我多年来一直坚持这个问题。

最佳答案

我有两个选择:

  1. 如果你喜欢带有网格的侧边栏,那么在 flex 布局中使用 .container-table 使用 bootstrap-essentials : jsfiddle.net/grvpanchal/1k1wdu8u

  2. 如果你想要一个响应式侧边栏 .navmenu 就像使用这个:jsfiddle.net/grvpanchal/g6kxjxuo

关于javascript - 如何使 Bootstrap 网格列成为页面的全高?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41840753/

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