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

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

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

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

查看 Bootstrap 文档。

Answer 2

在Bootstrap 3中，像这样..

<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://codeply.com/go/7wofwfzrH3

在Bootstrap 4中，像这样..

<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://codeply.com/go/t5DTGwero8

Answer 3

上述内容对我不起作用，因为我认为引导类已略有更改。

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

对我有用。

希望这有帮助

戴夫

Answer 4

下面是 Bootstrap 5 的示例。

但请注意，

offset

用于

margin-left

对齐。如果您想将项目与

margin-left

对齐，可以使用

offset

类。 Bootstrap 5 中有两种类型的偏移量：第一种是从 1-12 的

offset

，第二种是响应类，如

offset-sm

、

offset-lg

、

offset-md

。

看起来像这样：

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

Answer 5

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

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

Answer 6

在 bootstrap 5 + 检查订单栏

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