我正在研究 Bootstrap 网格。我想做像 pic1.jpg 这样的设计。但我没有得到我预期的设计。 pic2.jpg 是当前场景。我在下面给出了我的代码。
pic1.jpg :- ! http://s16.postimg.org/xjrulxcmd/pic1.png
pic2.jpg :- ! http://s30.postimg.org/tu3h09ubl/pic2.png
因此，类别 3 必须是类别 2、类别 4 和类别 5 的总和。 另外，我试图在 Category1 的左侧画一个圆圈，但它不起作用。 Circle 出现在 Category1 之后。它也应该是响应式的，这是必须的。
我的代码:-
<!-- Boostrap Help -->
<html lang="en">
<head>
<title>Example </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}
#circle {
background: #f00;
width: 50px;
height: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Category 1</p>
<div id="circle"></div>
</div>
<div class="col-md-8">
<p>Category 2</p>
</div>
<div class="col-md-4">
<p>Category 3</p>
</div>
<div class="col-md-8">
<p>Category 4</p>
</div>
<div class="col-md-8">
<p>Category 5</p>
</div>
</div>
</div>
</body>
</html>最佳答案
这就是我对上面提供的内容所做的
CSS
p{
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
height:100%;
}
#circle {
background: #f00;
width: 50px;
height: 50px;
border-radius: 50%;
position:absolute;
left:10%;
top:30%;
}
.abc {
position:relative;
}
.row-eq-height { /*-- This class is the trick make two column equal height --*/
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
HTML
<div class="container">
<div class="row">
<div class="col-md-12 abc">
<p>Category 1</p>
<div id="circle"></div>
</div>
</div>
<!-- This is how i make two column of your like you want, like wrap your Category 2,4,5 in one col and another col only for Category 3 and include the trick class - row-eq-height -->
<div class="row row-eq-height">
<div class="col-md-8" style="padding-left:0">
<div class="col-md-12"><p>Category 2</p></div>
<div class="col-md-12"><p>Category 4</p></div>
<div class="col-md-12"><p style="margin-bottom:0">Category 5</p></div>
</div>
<div class="col-md-4"><p>Category 3</p></div>
</div>
</div>
关于javascript - Bootstrap 多重网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32136930/