如何在 bootstrap 4 中创建响应式布局

Question

我正在尝试使用 Bootstrap 4 创建像屏幕截图一样的响应式布局，但在固定侧边栏和底部栏时遇到了一些问题，也无法更改底部的大小 bar.Also主栏和侧边栏都有单独的溢出滚动。

固定顶部导航栏>完成
固定边栏
固定底栏 > 完成
底栏大小应与主体相同

预期输出

这是我到目前为止所做的代码

<!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>

Answer 1

你能检查一下下面的代码吗？希望它对你有用。我们从所有元素中删除了内联样式。我们在侧边栏 .sidebar-content 中添加了样式 position: fixed; 并根据您的要求设置其位置。我们还在 .content-main 中添加了样式，因为我们将其设为可滚动内容并根据您的需要设置填充，我们进一步将宽度设置为 .footer（底栏），与 a .content-main（正文）。

请参考这个link：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>

如何在 bootstrap 4 中创建响应式布局

How to create responsive layout in bootstrap 4

html

css

layout

bootstrap-4