我正在学习Bootstrap,在对stackoverflow进行一些搜索之后,我想知道是否可以轻松地将div col变成多行。
这是我到目前为止所做的:
HTML:
<html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>testing</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">1st level with 12 col
<div class="row">
<div class="col-md-8">2nd level with 8 col
<div class="row">
<div class="col-md-4">3rd level with 4 col</div>
<div class="col-md-6 col-md-offset-2">3rd level with 6 col
<div class="row">
<div class="col-md-3 col-md-offset-1">4th level with 3 col</div>
<div class="col-md-5 col-md-offset-1">4th level with 5 colonnes</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">2nd level with 4 col</div>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="js/boostrap.js" charset="utf-8"></script>
<script src="js/jquery.js" charset="utf-8"></script>
</body>
</html>
</html>
CSS:
body{
padding-top: 10px;
}
[class*="col-"], footer{
background-color: lightgreen;
border: 2px solid black;
border-radius: 6px;
line-height: 40px;
text-align: center;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/*--------------------------------------- Responsive ---------------------------------------*/
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
我想理解为什么第3级6级,4级3col和第4级5级显示为两行,以及如何重现这个以集成psd。 (例如,获得一个带有3col和4rows的div)
谢谢你
编辑:答案:
以下是我所理解的,如果我想要多行多列,我必须像这样细分我的模板:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="row" id="top-row"></div>
<div class="row" id="bottom-row"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4" id="quote-2-high"></div>
</div>
</div>
在一行中我创建了两个div,每个div在单独的行中,以使主div设置为两行。 感谢Jeremy和Mustapha Aoussar,我现在知道如何使用它,我也知道有一些有用的工具可以帮助我清楚地看到bootstrap的网格系统:http://shoelace.io/