Bootstrap Grid:垂直浮动列
Tob*_*oby 6 css grid flexbox twitter-bootstrap
我正在使用Bootstrap网格进行项目,我想知道是否可以使列垂直浮动.截至目前,我似乎无法找到一种方法使这成为可能.我正在寻找一个针对Boostrap网格或使用其他网格的自定义css形式的问题的解决方案.但是我希望网格只使用css设置,不使用JavaScript.
这个例子有一个图像和一个链接:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Test</title>
<style type="text/css">
body {
margin-top: 20px;
}
.container {
padding: 0 10px;
}
@media (min-width: 768px) {
.container {
width: 768px;
}
}
@media (min-width: 992px) {
.container {
width: 868px;
}
}
.div1, .div2, .div3, .div4, .div5, .div6 {
background-color: #999;
border-radius: 6px;
width: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
font: bold 28px 'Arial';
}
.div1 {
height: 120px;
}
.div2 {
height: 260px;
}
.div3 {
height: 140px;
}
.div4 {
height: 180px;
}
.div5 {
height: 200px;
}
.div6 {
height: 90px;
}
.row {
background-color: #CCC;
border-radius: 6px;
padding: 5px;
margin: 0;
}
[class*="col-"] {
display: table;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2><b>Using Bootstrap</b><br>Each DIV is 6 columns wide with a variable height.<br>They're inside the same row.</h2><br>
<div class="row">
<div class="col-xs-6">
<div class="div1">DIV 1</div>
</div>
<div class="col-xs-6">
<div class="div2">DIV 2</div>
</div>
<div class="col-xs-6">
<div class="div3">DIV 3</div>
</div>
<div class="col-xs-6">
<div class="div4">DIV 4</div>
</div>
<div class="col-xs-6">
<div class="div5">DIV 5</div>
</div>
<div class="col-xs-6">
<div class="div6">DIV 6</div>
</div>
</div>
</div>
</body>
</html>
