I'm using Bootstrap 3. I have two rows. The first row has 4x3 columns. The second row has one column of 3 and one column of 9. The column of 9 has twice the height of all the other columns. I would like a column added beneath the column of 3 on the second row. I have made an image to explain it.
我使用引导3。我有两个行。第一行有4x3列。第二行有一列3，一列9。9的列的高度是其他列的两倍。我想在第二行的3列下面加一列。我做了一个图像来解释它。
Green is on one row and purple is on one row. I have tried to put yellow in it's own row, but then it is displayed on the left though but not against the bottom of the small purple block. I have also put the small purple and yellow blocks on the same row but they get displayed next to each other with the 90 block underneath them.
绿色在一排，紫色在一排。我试过把黄色放在它自己的行中，但是它显示在左边，但不是在紫色的小块的底部。我也把紫色和黄色的小块放在同一行，但是它们会被显示在一起，下面有90块。
2 个解决方案
#1
6
why you don't follow this
你为什么不照着做呢
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="col-md-12"></div>
</div>
</div>
and later you could trick it with css
之后你可以用css来欺骗它
#2
1
The Bootstrap grid system controls column width but not height. You can achieve your desired layout with the expected grid pattern and use height rules to make the bottom edge flush.
引导网格系统控制列的宽度而不是高度。您可以使用预期的网格模式来实现所需的布局，并使用高度规则使底部边缘齐平。
http://jsfiddle.net/rblakeley/ruggnzvq/
http://jsfiddle.net/rblakeley/ruggnzvq/
<html>
<head>
<title>Bootstrap grid example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
div[class^="col"] { height: 40px; text-align: center; border: 1px dashed red; background: #fcc;}
.row:nth-child(2) div[class^="col"] { background: #cfc;}
.row:nth-child(2) > div[class^="col"]:first-child { border: none;}
.row:nth-child(2) > div[class^="col"]:nth-child(2) { height: 100px;}
.row:nth-child(2) .row div[class^="col"]:nth-child(2) { height: 60px; background: #ccf;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">3</div>
<div class="col-xs-12">3</div>
</div>
</div>
<div class="col-xs-9">9</div>
</div>
</div>
</body>
</html>
#1
6
why you don't follow this
你为什么不照着做呢
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="col-md-12"></div>
</div>
</div>
and later you could trick it with css
之后你可以用css来欺骗它
#2
1
The Bootstrap grid system controls column width but not height. You can achieve your desired layout with the expected grid pattern and use height rules to make the bottom edge flush.
引导网格系统控制列的宽度而不是高度。您可以使用预期的网格模式来实现所需的布局，并使用高度规则使底部边缘齐平。
http://jsfiddle.net/rblakeley/ruggnzvq/
http://jsfiddle.net/rblakeley/ruggnzvq/
<html>
<head>
<title>Bootstrap grid example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
div[class^="col"] { height: 40px; text-align: center; border: 1px dashed red; background: #fcc;}
.row:nth-child(2) div[class^="col"] { background: #cfc;}
.row:nth-child(2) > div[class^="col"]:first-child { border: none;}
.row:nth-child(2) > div[class^="col"]:nth-child(2) { height: 100px;}
.row:nth-child(2) .row div[class^="col"]:nth-child(2) { height: 60px; background: #ccf;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
<div class="col-xs-3">3</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">3</div>
<div class="col-xs-12">3</div>
</div>
</div>
<div class="col-xs-9">9</div>
</div>
</div>
</body>
</html>