Bootstrap 中的偏移列答案

【问题标题】：Offset columns in BootstrapBootstrap 中的偏移列
【发布时间】：2017-05-28 07:29:09
【问题描述】：

这就是我想做的想法：

<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>

如何使用偏移量？

【问题讨论】：

标签： html twitter-bootstrap offset

【解决方案1】：

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

【讨论】：

谢谢！！如果我尝试执行“2 4 4 2”，为什么第二个 col-sm-4 不需要偏移量？
@sumguy 偏移列向左添加边距，因此在这种情况下，首先有 col-2 的边距/空间，然后是 col-4 的两个 div，然后剩余的 col-2 是剩余空间。考虑 100% 的父项和 70%（随机）的子项，所以现在您有 30% 的可用空间/右侧的空列。

【解决方案2】：

偏移量就像一个空白列，将保留在您的列之前。例如，如果您想要一个占屏幕一半大小并且正好位于中间的列，您必须这样做：

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

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

查看Bootstrap 文档。

【讨论】：

非常感谢！这很好地解释了这个概念:)
不客气！请您投票并接受答案吗？
在 Bootstrap 4 中使用 offset-sm-3 而不是 col-sm-offset-3

【解决方案3】：

以上内容对我不起作用，因为我认为引导类发生了轻微变化。

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

对我有用。

希望对你有帮助

戴夫

【讨论】：

【解决方案4】：

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

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

【讨论】：