Bootstrap嵌套网格布局

时间：2016-11-03 09:24:40

标签： css html5 twitter-bootstrap-3

我是Bootstrap的新手并阅读本教程，该教程解释了bootstrap grid system。我正在尝试制作一个看起来像这样的布局

enter image description here

每个彩色块表示未指定高度的Web组件，Web组件应占用其父级的高度。问题是父div没有占据100％的高度来占据整个视口 高度。

我为所有div添加了50px高度，以便我可以正确显示输出。原始代码没有它。

＆＃13;
＆＃13; 
div {
  height: 50px;
  border: 1px solid black;
}
＆＃13; 
<link rel="stylesheet" type="text/css" href="./assets/libs/bootstrap/css/bootstrap.min.css"></link>


<div class="container">
  <div class="row">
    <div class="col-lg-7">
      <div class="row">
        <div class="col-lg-8"></div>
        <div class="col-lg-4"></div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-8"></div>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6">
          <div class="row">
            <div class="col-lg-12"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-lg-12"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Load scripts here-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="./assets/libs/bootstrap/js/bootstrap.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
<script src="../bower_components/restangular/dist/restangular.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<script src="../bower_components/chart.js/dist/Chart.bundle.min.js"></script>
<script src="app.js"></script>
＆＃13;
＆＃13;
＆＃13;

这是嵌套网格布局后的样子

enter image description here

此时我很无能为力，我在这里缺少什么？

3 个答案:

答案 0 :(得分：2)

LIVE LINK

你可以这个方式div＆amp;＆amp; col-md-*/col-lg-*。 高度不是问题因为如果你想要你也可以使用 100％高度的height=100vh or 50vh来占据整个视口高度。

height:100vh live Link时 或者height:auto

当你在div中保留一些内容时。

BY DIV EX：

＆＃13;
＆＃13; 
body 
{
margin: 0; 
padding: 0; 
font-size: 100%; 
font-family: Arial, Helvetica, sans-serif;
}
.bborder{
	border: 1px solid #000;
}
.cborder {
	border: 1px solid #000;
	height: 150px;
}
.border {
	border: 1px solid #000;
	height: 300px;
}
.color {
	background: #B5E61D;
}
.color_1 {
	background: #99D9EA;
}
.color_2 {
	background: #B97A57;
}
.color_3 {
	background: #A349A4;
}
.color_4 {
	background: #EFE4B0;
}
.color_5 {
	background: #FFC90E;
}
.color_6 {
	background: #C8BFE7;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

		<div class="">
		<div class="">
			
			<div class="col-md-7 col-lg-7">
			<div class="row">
				<div class="col-md-12 col-lg-12">
				<div class="row">
					<div class="col-md-8 col-lg-8 cborder color">
					
					</div>
					<div class="col-md-4 col-lg-4 cborder color_1">
					
					</div>
				</div>
				</div>
				
				<div class="col-md-12 col-lg-12">
				<div class="row">
					<div class="col-md-4 col-lg-4 cborder color_2">
					
					</div>
					<div class="col-md-8 col-lg-8 cborder color_3">
					
					</div>
				</div>
				</div>
			</div>
			</div>
			<div class="col-md-5 col-lg-5">
			<div class="row">
				<div class="col-md-6 col-lg-6 border color_4">
				<div class="row">
				
				</div>
				</div>
				<div class="col-md-6 col-lg-6">
				<div class="row">
					<div class="col-md-12 col-lg-12 cborder color_5">
					<div class="row">
					
					</div>
					</div>
					
					
					<div class="col-md-12 col-lg-12 cborder color_6">
					<div class="row">
					</div>
					</div>
					
				</div>
				</div>
			</div>
			</div>
			
		</div>
		</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我能够实现你想要做的事情： 这是https://plnkr.co/edit/zhGMXoFmLgogwCMKQz6t?p=preview 检查代码。它可能会对你有所帮助：

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
    <script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style type="text/css">
        div.box{
           height: 50px;
           border: 1px solid black; 
        }
        #double{
          height:100px;

        }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-7">
          <div class="row">
            <div class="col-lg-8 box"></div>
            <div class="col-lg-4 box"></div>
            <div class="clearfix visible-lg-block"></div>
            <div class="col-lg-4 box"></div>
            <div class="col-lg-8 box" ></div>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="row">
            <div class="col-lg-6 box" id="double"></div>
            <div class="col-lg-6">
              <div class="row">
                <div class="col-lg-12 box"></div>
                <div class="clearfix visible-lg-block"></div>
                <div class="col-lg-12 box"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

答案 2 :(得分：-1)

希望这能满足你的问题.. 

<div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col">
                <div class="row">
                    <div class="col-lg-8 well"></div>
                    <div class="col-lg-4 well"></div>
                </div>
                <div class="row">
                    <div class="col-lg-4 well"></div>
                    <div class="col-lg- well"></div>
                </div>  
            </div>
            <div class="col-lg-3 col">
                <div class="row well">

                    </div>
                </div>
            <div class="col-lg-3 col">
                        <div class="row well"></div>
                        <div class="row well"></div>
            </div>
        </div>
    </div>

这是代码笔链接...尝试在调试模式下查看

http://codepen.io/AnanthAkr/pen/oYvQrz

相关问题
最新问题