Bootstrap 中的偏移列

Question

这是我想做的事情的想法：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-2"></div>
    </div>
</div>

使用偏移量如何工作？

Answer 1

在Bootstrap3,这样..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

http://www.codeply.com/go/7wofwfzrH3

在Bootstrap4中，像这样..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 offset-sm-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

https://www.codeply.com/go/t5DTGwero8

Answer 2

偏移量就像一个空白列，将保留在您的列之前。例如，如果您想要一列的大小为屏幕的一半，并且恰好位于中间，则必须执行以下操作：

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

整行有 12 列。这样您将有 6 列（行的一半）和 3 列的偏移量。它将正好在屏幕中间。

查看 Bootstrap 文档。

Answer 3

以上内容对我不起作用，因为 我认为 bootstrap 类略有变化。

<div class="col-md-4 offset-md-2">

对我有用。

希望对您有所帮助

戴夫

Answer 4

我正在使用 bootstrap 3. 下面的代码让我可以将 div 右移。

<div class="col-lg-4 offset-lg-4"></div>

Bootstrap 中的偏移列

Offset columns in Bootstrap

html

offset

twitter-bootstrap