引导偏移不起作用答案

【问题标题】：Bootstrap offset is not working引导偏移不起作用
【发布时间】：2018-08-06 05:19:13
【问题描述】：

我只是在尝试使用 Bootstrap，但我无法使偏移量起作用，我不知道为什么。这是我的代码：

<div class="container">
  <div class="row justify-content-between align-items-stretch">
    <div class="col-4 offset-2"> ABC </div>
    <div class="col-4"> DEF </div>
  </div>
</div>

由于某种原因，offset-2 根本不移动该列。你知道为什么吗？

提前致谢，

【问题讨论】：

jsfiddle.net/j7gmLs8z 它正在工作。您是否正确导入了 Bootstrap？
我会试试的，非常感谢 Sujata
@SujataChanda - Bootstrap 的哪个版本？

标签： html twitter-bootstrap offset

【解决方案1】：

希望这将根据您的要求工作：-

<!DOCTYPE html>
<html lang="en">

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row justify-content-between align-items-stretch">

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

</body>

</html>

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
分解一下，它的工作原理如下： 1.Containers 提供了一种居中和水平填充站点内容的方法。使用 .container 响应像素宽度或 .container-fluid 宽度：在所有视口和设备尺寸上为 100%。 2.在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。 3.Column 类表示每行可能有 12 个列中您希望使用的列数。所以，如果你想要三个等宽的列，你可以使用 .col-4。
4. 有列前缀来增强各种设备中的列可用示例有：.col-,.col-sm(540px),.col-md-(720px) 等...
谢谢，看起来不错，但最好“编辑”答案并将所有信息放在那里。干杯！