Bootstrap-列偏移

在我们写布局的时候,我们不喜欢或者不想让两个容器挨在一起,我们可以用Bootstrap的:列偏移来实现!

我们可以使用:col-md-offset-*来实现列偏移效果!相当于:CSS  margin效果

我们先来看:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列偏移</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
<body>
    <p style="text-align: center;font-size: 30px">栏格布局-列偏移</p>
   <div class="container">
        <div class="row"> 
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row"> 
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3">col-md-3</div>
        </div>
        <div class="row"> 
            <div class="col-md-6">col-md-6</div>
        </div>
   </div>
</body>
</html>

以上代码运行结果:

我不想让,第一个col-md-4和第二个col-md-4俩挨在一起,怎么办呢?

我们用 col-md-offset-*来实现列的位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列偏移</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
<body>
    <p style="text-align: center;font-size: 30px">栏格布局-列偏移</p>
   <div class="container">
        <div class="row"> 
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4 col-md-offset-4">col-md-4</div>
        </div>
        <div class="row"> 
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-3 col-md-offset-3">col-md-3</div>
        </div>
        <div class="row"> 
            <div class="col-md-6 col-md-offser-3">col-md-6</div>
        </div>
   </div>
</body>
</html>

以上代码运行结果:

我们发现,第一列的第一个col-md-4向右偏移了4列

本章重点:offset的使用

posted @ 2019-09-05 14:51  阿沅lmo  阅读(75)  评论(0编辑  收藏  举报