Bootstrap 上带有页眉、页脚、左侧菜单、内容、右侧菜单的最小布局 4-5

Question

使用 header、footer、LeftMenu、Content, RightMenu 在 Bootstrap 4-5.
LeftMenu + Content + RightMenu的宽度和当前主块的宽度差不多网站（html forum.io）。
换句话说，不是浏览器的整个宽度，而是在中心。也许有一些关于这些元素的宽度的实践？
LeftMenu - 绑定到容器的左边缘。
RightMenu - 绑定到容器的右边缘。

例如...

图中模拟。

我试试，一切都跳起来了...

代码

<!doctype html>
<html lang="ru">
<head>
  <!-- Кодировка веб-страницы -->
  <meta charset="utf-8">
  <!-- Настройка viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>...</title>

  <!-- Bootstrap CSS (jsDelivr CDN) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- Bootstrap Bundle JS (jsDelivr CDN) -->
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
  <!-- Контент страницы -->  
<div class="container sm ">
<header  class="s-topbar ps-fixed t0 l0 js-top-bar bg-primary text-white">
  <div class="container-fluid p-3">
    HEADER
  </div>
</header>
<section class="position-relative">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-xl-4 a1 bg-danger text-white w-3 ">A1</div>
      <div class="col-md-6 col-xl-4 a2 bg-warning text-dark">A2</div>
      <div class="col-md-6 col-xl-4 a3 bg-success text-white">A3</div>      
    </div>
  </div>
</section>
<footer class="fixed-bottom"> 
  <div class="container-fluid p-3 mb-2 bg-dark text-white" >
    FOOTER
  </div>
</footer>
</div>
</body>
</html>

https://jsfiddle.net/User65659/m4svktd8/1/

Answer 1

您想使用 Bootstrap 4 或 5 创建一个像这样的简单布局。

我认为这就是您想要的样式，您可以更改高度和内边距等等。

查看： https://codepen.io/nisoojadhav/full/RwQZERj

.header{
  background-color:#2f2f2f;
color:#fff;
  text-align:center;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.left{
  background-color:#F55353;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.middle{
  background-color:#FEB139;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.right{
 background-color:#00B4D8;
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center; 
}

.footer{
  background-color:royalblue;
  text-align:center;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header col-12">
  <h1>Header</h1>
</div>
<div class="row">
  <div class="col-3 left">
  <h4>left</h4>
  </div>
    <div class="col-6 middle">
      <h4>middle</h4>
    </div>
  <div class="col-3 right">
    <h4>right</h4>
    </div>
</div>

<div class="footer col-12">
  <h2>Footer</h2>
</div>

Bootstrap 上带有页眉、页脚、左侧菜单、内容、右侧菜单的最小布局 4-5

Minimal layout with header, footer, Left Menu, Content, RightMenu on Bootstrap 4-5

html

css

bootstrap-4

bootstrap-5