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

马约尔·萨塔夫

我试图创建一个响应式布局，如使用 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>

尤迪兹解决方案

你能检查一下下面的代码吗？希望它对你有用。我们从所有元素中删除了内联样式。我们在侧边栏添加的风格.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-18

我来说两句

0 条评论

登录后参与评论

上一篇：我如何提取 promise.all 调用的响应值（ReactJS 多个端点）

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

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

蓝屏死机没有修复解决方案

计算数据帧中每行的NA

UITableView的项目向下滚动后更改颜色，然后快速备份

Node.js中未捕获的异常错误，发生调用

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Linux的官方Adobe Flash存储库是否已过时？

验证REST API参数

ggplot：对齐多个分面图-所有大小不同的分面

Mac OS X更新后的GRUB 2问题

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

带有错误“ where”条件的查询如何返回结果？

用日期数据透视表和日期顺序查询

VB.net将2条特定行导出到DataGridView

如何从视图一次更新多行（ASP.NET - Core）

Java Eclipse中的错误13，如何解决？

尝试反复更改屏幕上按钮的位置 - kotlin android studio

离子动态工具栏背景色

应用发明者仅从列表中选择一个随机项一次

当我尝试下载 StanfordNLP en 模型时，出现错误

python中的boto3文件上传

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID