美文网首页Web前端WEB前端程序开发
Bootstrap3 - 9.offset(偏移的空间)

Bootstrap3 - 9.offset(偏移的空间)

作者: 廖马儿 | 来源:发表于2018-01-03 12:21 被阅读6次

想让一个区块向右偏移一定距离。在普通桌面电脑屏幕宽度以上向右边偏移6个网格col-md-offset-6

代码:

<!doctypoe html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h1 class="page-header">title</h1>
                <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                <div class="row">
                    <div class="col-md-4 ">
                        <h1 class="page-header">title</h1>
                        <p >retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                    </div>
                    <div class="col-md-4">
                        <h1 class="page-header">title</h1>
                        <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                    </div>
                    <div class="col-md-4 col-md-offset-6">
                        <h1 class="page-header">title</h1>
                        <p class="alert alert-info">retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <h1 class="page-header">sidebar</h1>
                <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
            </div>
        </div>  
    </div>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>   
</body>
</html>


效果:

图片.png

相关文章

网友评论

    本文标题:Bootstrap3 - 9.offset(偏移的空间)

    本文链接:https://www.haomeiwen.com/subject/ybrhnxtx.html