bootstrap中到底有什么偏移？

Question

我明白什么是网格,基本上整行将有12个空格.

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

基本上上面的代码只是将空格划分为3个部分,但我不明白的是,什么是做偏移的重点？

<div class="col-lg-6 col-md-offset-3"></div>

上面的代码到底是做什么的？

Answer 1

偏移用于响应网格中的间隔元素.

该单元基于列布局.

您可以通过这种方式定义偏移:col- [breakpoint] -offset- [colums数]

在此示例中,允许我们的布局由12列组成:

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <p>test</p>
    </div>
</div>

意味着在网格系统的中等范围内,元素将具有6个列的宽度,并且在元素之前将有3个空白列(因此,之后将具有3 个空白列).

结果是6个colums宽度的div,以容器为中心.

有一个示例显示它在Bootstrap文档中的呈现方式. http://getbootstrap.com/css/#grid-offsetting