Rumah > Artikel > hujung hadapan web > Bootstrap栅格布局的嵌套实例
Bootstrap栅格布局的嵌套实例
- 无忌哥哥asal
- 2018-06-28 16:52:242395semak imbas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="jquery-3.2.1.js"></script>
<script src="dist/js/bootstrap.js"></script>
<title>栅格布局的嵌套</title>
<style>
.grid {
border: 1px solid #696969;
border-radius: 5px;
background-color: lightskyblue;
min-height: 30px;
text-align: center;
line-height: 30px;
}
.green {
background-color: lightgreen;
}
.pink {
background-color: lightpink;
}
</style>
</head>
<body>
<div>
<div>
<div class="col-sm-9 grid">
Level 1: .col-sm-9
<div>
<div class="col-xs-8 col-sm-6 green">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6 pink">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</body>
</html>Atas ialah kandungan terperinci Bootstrap栅格布局的嵌套实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bootstrap栅格布局的列偏移实例Artikel seterusnya：Bootstrap栅格布局的列排序实例