我为正在制作的项目提供了一些代码,但是在引导程序布局上遇到了麻烦。我想使这些列加起来成为全屏高度。 Here是我现在所拥有的。我将所有行嵌套在设置为
的列中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>-->
这是CSS
html,body {
height: 100%;
宽度:100%; }
.col {
background-color:lime;
}
#LeftCol1 {
background-color:blue;
height: 100%;
}
#LeftCol2 {
background-color:red;
height: 100%
}
.layoutrow{
border:solid 1px black;
}
.MidCol{
height: 100%;
}
#RightCol {
height: 100%;
}
如何进行此更改?谢谢!
答案 0 :(得分:1)
使用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>
希望对您有所帮助。
附言不要介意颜色。
答案 1 :(得分:0)
尝试将内部行放入容器中,如下所示:
<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>