Home >Web Front-end >CSS Tutorial >Bootstrap grid layout column offset example
Bootstrap grid layout column offset example
- 无忌哥哥Original
- 2018-06-28 16:43:002420browse
<!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>The above is the detailed content of Bootstrap grid layout column offset example. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Bootstrap grid layout system exampleNext article：Bootstrap grid layout system example