【问题标题】：Bootstrap col-md-offset-* not working引导 col-md-offset-* 不起作用
【发布时间】：2016-11-16 08:43:27
【问题描述】：

我正在尝试在我的代码中添加 Bootstrap 偏移类以实现对角对齐，如下所示：

但我不知道应该使用什么偏移量。我已经尝试了几个偏移来实现这一点，但没有用。文本覆盖了整个 jumbotron。这是我的代码

HTML：

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div>
                    <h2 class="col-md-4 col-md-offset-4">Browse.</h2>
                    <h2 class="col-md-4 col-md-offset-4">create.</h2>
                    <h2 class="col-md-4 col-md-offset-4">share.</h2>
                </div>
            </div>
        </div>
    </div>

CSS：

.jumbotron {
    height: 500px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
}

.jumbotron h2 {
    color: white;
    font-size: 60px;
}

.jumbotron h2:first-child {
    margin: 120px 0 0;
}

请指导我。提前谢谢你。

【问题讨论】：

您的偏移量不应该更像 2-4-6 而不是 4-4-4？
使用 'text-align: right' 在一个 div 中添加文本和换行
对我来说 4.0.0-beta 不适用于偏移量，但 4.0.0-beta.2 确实有效。也许那里有一个错误（啊，根据stackoverflow.com/a/46503532/8479）。请注意，现在 bootstrap v4 中的偏移类看起来像 offset-md-4 而不是 col-md-offset-4。
看起来您希望它们右对齐。使用偏移量，您仍然受制于浏览器显示和缩放。简单地放置一个容器 div 并右对齐三行不是更明智吗？

标签： html css twitter-bootstrap

【解决方案1】：

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div>
                    <h2 class="col-md-4 offset-md-4">Browse.</h2>
                    <h2 class="col-md-4 offset-md-4">create.</h2>
                    <h2 class="col-md-4 offset-md-4">share.</h2>
                </div>
            </div>
        </div>
    </div>

你可以试试这个。

【讨论】：

【解决方案2】：

请在 bootstrap 4 中使用 offset-md-4 而不是 col-md-offset-4。这是 bootstrap 4 中采用的小改动。

For more info

【讨论】：

【解决方案3】：

在引导程序 3 中，格式为

col-md-6 col-md-offset-3

对于 Bootstrap 4 中的相同网格，格式为

col-md-6 offset-md-3

【讨论】：

感谢您的回答！看到这个并意识到我正在使用 bootstrap 3，它帮助我获得了我想要的偏移量。

【解决方案4】：

它在 bootstrap 4 中工作，文档中有一些变化。我们不需要前缀 col-，只需要 offset-md-3 例如

<div class="row">
   <div class="offset-md-3 col-md-6"> Some content...
   </div>
</div>

这里doc。

【讨论】：

这还能用吗？当时我无法使用和不使用 col-*
嘿，很难回答你的问题，添加一些代码或sn-p与你的问题。
这解决了我过去几个小时一直在处理的问题。我准备好不使用这个主题了。谢谢！！！
谢谢！我什至在他们网站的从 bootstrap 3 到 4 的迁移指南中都找不到它...
这对我有用。非常感谢。

【解决方案5】：

如果您对小调整没问题 - 我们知道 bootstrap 的宽度为 12

<div class="row">
      <div class="col-md-1">
            Keep it blank it becomes left offset
      </div> 
      <div class="col-md-5">
      </div>
      <div class="col-md-5">
      </div>
      <div class="col-md-1">
            Keep it blank it becomes right offset
      </div
</div>

我确信有更好的方法可以做到这一点，但我很着急所以用了这个技巧

【讨论】：

【解决方案6】：

现在，例如，如果您只想将一列移动到 4 个列单元上，我建议只使用一个虚拟占位符，如下面的示例所示

<div class="row">
      <div class="col-md-4">Offset 4 column</div>
      <div class="col-md-8">
            //content
      </div>
</div>

【讨论】：

【解决方案7】：

Bootstrap 4 偏移类已在 Beta 1 中删除，但将在 Beta 2 中恢复 - topic reference

【讨论】：

【解决方案8】：

将col-md-offset-* 更改为offset-md-* 对我有用

【讨论】：

【解决方案9】：

问题出在哪里

在您的 HTML 中，所有 h2s 都具有相同的 4 列偏移量，因此它们不会形成对角线。

如何解决

row 有 12 列，因此我们应该将每个 h2 放入它自己的 row 中。你应该有这样的东西：

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-4 col-md-offset-1">Browse.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-2">create.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

另一种方法是使每个h2 宽度加上偏移量总和为 12 列，这样每一列都会自动换行。

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-11 col-md-offset-1">Browse.</h2>
                <h2 class="col-md-10 col-md-offset-2">create.</h2>
                <h2 class="col-md-9 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

【讨论】：

我编辑了我的答案，因为我意识到我误解了这个问题。对不起。
嘿！它仍然无法正常工作。顺便谢谢:) @DanieleBarresi
你是对的。编辑修复它。现在它起作用了。我应该指出，这只会在大于 992px 的屏幕上产生对角线，即md 大小。如果每个屏幕尺寸都需要它，请将 md 替换为 xs。

【解决方案10】：

我不建议在这种情况下使用网格系统，而只是为每个<h2> 添加一个增加的填充。话虽如此，使用col-*-offset-* 实现此目的的方式如下：

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>

基本上第一行必须跨越整行（所以-12）。第二行必须偏移 1 列，因此偏移 1 并为其提供 11 列的总宽度 (11+1 = 12)，依此类推。您的偏移量始终足以确保总列数等于 12。

【讨论】：

知道了。非常感谢:) @RobertC

【解决方案11】：

检查这个bootply

这是错误的，因为 bootstrap 使用 margin-left:**%

.jumbotron h2:first-child {
   margin: 120px 0 0;
}

【讨论】：

【解决方案12】：

应该是：

<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
<h2 class="col-md-4 col-md-offset-2">create.</h2>
<h2 class="col-md-4 col-md-offset-3">share.</h2>

【讨论】：

已更正。但还是不行！无论如何，谢谢你！ @MrGeek