Question

我正致力于学习bootstrap，我希望有一个带有页眉，页脚和三个中间列的网站。到目前为止，我有标题和列，但我还没有完全理解如何制作页脚，我很确定我做错了方法，但我希望得到一些帮助。我试着把它放在div中并将宽度改为100 vw而我还没有完全理解它。标题基本上只是顶部的容器流体部分，我为页脚做了一个div，但边缘仍然是容器的颜色，所以我想我的问题是：容器和容器流体的确切目的是什么以及如何我是否会让页脚div占据整个空间？谢谢，代码是：

＆＃13;

    .div1 {
      background-color:red;
    }

    .div2 {
      background-color:gray;
    }

    .div3 {
      background-color:blue;
    }

    .row {
      height: calc(100vh - 200px);
    }

    #main {
      background-color: lime;
    }

    #main_head {
      height: 200px;
      color: red;
      margin: 0;
    }

    #main_foot {
      height: 200px;
      background-color: pink;
      margin: 0;
      color: red;
  }

＆＃13;

    <!DOCTYPE html>
    <html>
      <html lang="en">
    <head>
      <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    
    </head>
    <body>
      
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
    <div class="container-fluid" id="main">
      <h1 id="main_head">This is a heading</h1>
      
      <div class="row">
        <div class="col-sm-2 div1">
        </div>
        <div class="col-sm-8 div2">
        </div>
        <div class="col-sm-2 div3">
        </div>
      </div>
      
      <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
    </div>
    
    </body>
    </html>

＆＃13;

Answer 1

container-fluid占据屏幕的整个宽度，而container每个分辨率都有固定大小。

＆＃13;

.div1 {
      background-color:red;
    }

    .div2 {
      background-color:gray;
    }

    .div3 {
      background-color:blue;
    }

    .row {
      height: calc(100vh - 200px);
    }

    #main {
      background-color: lime;
    }

    #main_head {
      height: 200px;
      color: red;
      margin: 0;
    }

    #main_foot {
      height: 200px;
      background-color: pink;
      margin: 0;
      color: red;
     position: absolute;
     left: 0;
     right: 0;
    
  }

＆＃13;

<!DOCTYPE html>
    <html>
      <html lang="en">
    <head>
      <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
    
    </head>
    <body>
      
    <link rel="stylesheet" href="test.css">
    <script src="test.js"></script>
    <div class="container-fluid" id="main">
      <h1 id="main_head">This is a heading</h1>
      
      <div class="row">
        <div class="col-sm-2 div1">
        </div>
        <div class="col-sm-8 div2">
        </div>
        <div class="col-sm-2 div3">
        </div>
      </div>
      
      <div id="main_foot" class="container-fluid"><h1>This is a footer</h1></div>
    </div>
    
    </body>
    </html>

＆＃13;

了解bootstrap容器流体如何工作以及如何在容器内部制作一个部分填充整个宽度

1 个答案: