Css 使引导列嵌套在行中占据全屏高度_Css_Twitter Bootstrap_Bootstrap 4

Css 使引导列嵌套在行中占据全屏高度

css twitter-bootstrap bootstrap-4

Css 使引导列嵌套在行中占据全屏高度,css,twitter-bootstrap,bootstrap-4,Css,Twitter Bootstrap,Bootstrap 4,我有一些我正在做的项目的代码，我在引导布局上遇到了问题。我想让这些列加起来成为全屏高度。只是我现在拥有的一小部分。我已将列中嵌套的所有行设置为 height:100% 因为这是我最接近我想要的。我想做一些看起来像这样的东西（请原谅我糟糕的MS绘画技能）：以下是我的代码，以防链接不起作用： <!DOCTYPE html> <html lang="en"> <head>  <link re

我有一些我正在做的项目的代码，我在引导布局上遇到了问题。我想让这些列加起来成为全屏高度。只是我现在拥有的一小部分。我已将列中嵌套的所有行设置为

height:100%

因为这是我最接近我想要的。我想做一些看起来像这样的东西（请原谅我糟糕的MS绘画技能）：

以下是我的代码，以防链接不起作用：

<!DOCTYPE html>
<html lang="en">
<head>

<!-- Link to css file -->
<link rel="stylesheet" type="text/css" href="/static/main.css" mesdia="screen"/>

<!-- Bootstrap CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<meta charset="UTF-8">
<title>Layout</title>
<!--<h1>Welcome to the layout</h1>
<p>Where would you like to navigate to?</p>-->
</head>
<body>

<div class="container-fluid">
<div class="row" id="navcols">

    <div class="col layoutcol">
        <div class="row layoutrow" id="LeftCol1">Row</div>
        <div class="row layoutrow" id="LeftCol2">Row</div>
    </div>

    <div class="col-sm-6 layoutcol">
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
    </div>

    <div class="col layoutcol">
        <div class="row layoutrow" id="RightCol">Row</div>
    </div>

</div>
</div>

<!--
<div class="container-fluid">
    <h1 id="test">Welcome to my page! Where do you want to navigate to?</h1>
</div>-->

宽度：100%； }

我怎样才能着手做这个改变呢？谢谢

尝试将内部行放入容器中，如下所示：

<div class="col-sm-6 layoutcol">
    <div class="container-fluid">
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
    </div>
</div>


一行
一行
一行
一行
一行

通过css和引导程序的组合，您可以实现所需的功能。
这是我所做的。

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Grid </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
    .first .first_row{
      background-color: #ff0000;
      height: 50vh;
      border:2px solid black;
    }
    .first .second_row{
      background-color: #ffff00;
      height: 50vh;
      border:2px solid black;
    }

    .second .first_row{
      background-color: #cc99ff;
      height: 20vh;
      border:2px solid black;
    }
    .second .second_row{
      background-color: #ff0066;
      height: 20vh;
      border:2px solid black;
    }
    .second .third_row{
      background-color: #0099ff;
      height: 20vh;
      border:2px solid black;
    }
    .second .fourth_row{
      background-color: #006666;
      height: 20vh;
      border:2px solid black;
    }
    .second .fifth_row{
      background-color: #000099;
      height: 20vh;
      border:2px solid black;
    }
    .third .first_row{
      background-color: #006600;
      height: 100vh;
      border:2px solid black;
    }
    </style>
  </head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 first">
        <div class="row first_row">
        </div>
        <div class="row second_row">
        </div>  
      </div>
      <div class="col-md-6 second">
        <div class="row first_row">
        </div>
        <div class="row second_row">
        </div>
        <div class="row third_row">
        </div>
        <div class="row fourth_row">
        </div>
        <div class="row fifth_row">
        </div>
      </div>
      <div class="col-md-3 third">
        <div class="row first_row">
        </div>    
      </div>    
    </div>
  </div>
</body>
</html>


网格
.第一排，第一排{
背景色：#ff0000；
高度：50vh；
边框：2件纯黑；
}
.第一排，第二排{
背景色：#ffff00；
高度：50vh；
边框：2件纯黑；
}
.第二，第一排{
背景色：#cc99ff；
高度：20vh；
边框：2件纯黑；
}
.第二排，第二排{
背景色：#ff0066；
高度：20vh；
边框：2件纯黑；
}
.第二排，第三排{
背景色：#0099ff；
高度：20vh；
边框：2件纯黑；
}
.第二排。第四排{
背景色：#006666；
高度：20vh；
边框：2件纯黑；
}
.第二排。第五排{
背景色：#000099；
高度：20vh；
边框：2件纯黑；
}
.第三排。第一排{
背景色：#006600；
高度：100vh；
边框：2件纯黑；
}

我希望它能帮助你。

另外，别介意颜色。

@Paulie\u抱歉！我很乐意帮助你

<div class="col-sm-6 layoutcol">
    <div class="container-fluid">
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
        <div class="row MidCol layoutrow">Row</div>
    </div>
</div>

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Grid </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
    .first .first_row{
      background-color: #ff0000;
      height: 50vh;
      border:2px solid black;
    }
    .first .second_row{
      background-color: #ffff00;
      height: 50vh;
      border:2px solid black;
    }

    .second .first_row{
      background-color: #cc99ff;
      height: 20vh;
      border:2px solid black;
    }
    .second .second_row{
      background-color: #ff0066;
      height: 20vh;
      border:2px solid black;
    }
    .second .third_row{
      background-color: #0099ff;
      height: 20vh;
      border:2px solid black;
    }
    .second .fourth_row{
      background-color: #006666;
      height: 20vh;
      border:2px solid black;
    }
    .second .fifth_row{
      background-color: #000099;
      height: 20vh;
      border:2px solid black;
    }
    .third .first_row{
      background-color: #006600;
      height: 100vh;
      border:2px solid black;
    }
    </style>
  </head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 first">
        <div class="row first_row">
        </div>
        <div class="row second_row">
        </div>  
      </div>
      <div class="col-md-6 second">
        <div class="row first_row">
        </div>
        <div class="row second_row">
        </div>
        <div class="row third_row">
        </div>
        <div class="row fourth_row">
        </div>
        <div class="row fifth_row">
        </div>
      </div>
      <div class="col-md-3 third">
        <div class="row first_row">
        </div>    
      </div>    
    </div>
  </div>
</body>
</html>