引导 col-md-offset-\* 不起作用

Question

我正在尝试在我的代码中添加 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;
}

请指导我。提前谢谢你。

原文由 Aisha Salman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不建议在这种情况下使用 Grid 系统，只需为每个 <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。

原文由 Robert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

这里 是医生。

原文由 Vasyl Gutnyk 发布，翻译遵循 CC BY-SA 4.0 许可协议