Rumah >hujung hadapan web >tutorial css >Bootstrap栅格布局的列偏移实例
Bootstrap栅格布局的列偏移实例
- 无忌哥哥asal
- 2018-06-28 16:43:002443semak 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-md-4 grid">.col-md-4</div>
<div class="col-md-4 col-md-offset-4 grid">.col-md-4 .col-md-offset-4</div>
</div>
<div>
<div class="col-md-3 col-md-offset-3 grid">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3 grid">.col-md-3 .col-md-offset-3</div>
</div>
<div>
<div class="col-md-6 col-md-offset-3 grid">.col-md-6 .col-md-offset-3</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栅格布局的嵌套实例