【问题标题】：How to create responsive layout in bootstrap 4如何在引导程序 4 中创建响应式布局
【发布时间】：2021-04-06 16:06:29
【问题描述】：
我试图创建一个响应式布局，如使用 Bootstrap 4 的屏幕截图，但在固定侧边栏和底边栏时遇到了一些问题，也无法更改底边栏的大小。主边栏和侧边栏都有单独的溢出滚动.
- 固定顶部导航栏>完成
- 固定侧栏
- 固定底栏 > 完成
- 底栏尺寸应与主体尺寸相同
预期输出
这是我到目前为止所做的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<style>
html,
body {
height: 100%;
}
</style>
<body>
<!-- Top Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">logo</a>
</nav>
<!-- main body -->
<div class="container-fluid h-100" >
<div class="row h-100">
<!-- left body -->
<div class="col-sm-10" style="background-color: #F0F2F5;">
<div class="container-fluid" style="margin-top:80px">
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
</div>
</div>
<!-- side nav Bar -->
<div class="col-sm-2 border" style="margin-top:55px;" >
<h5>list</h5>
<hr>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
</div>
</div>
</div>
<!-- bottom player -->
<nav class="navbar fixed-bottom navbar-dark bg-dark" >
<div class="container" style="width: 50%;height: 40px;">
</div>
</nav>
</body>
</html>
【问题讨论】：
标签：
html
css
layout
bootstrap-4
【解决方案1】：
你能检查一下下面的代码吗？希望它对你有用。我们从所有元素中删除了内联样式。我们在侧边栏中添加样式.sidebar-content 为position: fixed;，并根据您的要求设置其位置。我们还在.content-main 中添加了样式，因为我们将其设为可滚动内容并根据您的需要进一步设置填充，我们将宽度设置为.footer（底栏），与
.content-main（主体）。
请参考此链接：https://jsfiddle.net/yudizsolutions/14ybmh92/7/
body {
background-color: #F0F2F5;
}
main {
padding: 56px 0;
}
nav.header{
z-index: 1060;
}
.row .sidebar-content{
position: fixed;
right:0;
bottom:0;
overflow: auto;
overflow-x: hidden;
height: calc(100% - 56px);
z-index: 1050;
background-color: #fff;
}
.content-main{
height:calc(100vh - 112px);
overflow-y: scroll;
}
.footer{
max-width: calc(100% - 16.666667%);
}
@media (max-width:767px)
/* for mobile */
{
.sidebar-content {
position: unset;
height: 100%;
z-index: 100;
background-color: #fff;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<style>
html,
body {
height: 100%;
}
</style>
<body>
<!-- Top Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">logo</a>
</nav>
<main>
<!-- main body -->
<div class="container-fluid h-100">
<div class="row h-100">
<!-- left body -->
<div class="col-sm-10 content-main">
<div class="container-fluid">
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
</div>
</div>
<!-- side nav Bar -->
<div class="col-sm-2 border sidebar-content" style="margin-top:55px;">
<h5>list</h5>
<hr>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
<h1>some text</h1>
</div>
</div>
</div>
</main>
<!-- bottom player -->
<nav class="navbar fixed-bottom navbar-dark bg-dark">
<div class="container" style="width: 50%;height: 40px;">
</div>
</nav>
</body>
</html>