Bootstrap 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;
}

请指导我.提前谢谢你.

Answer 1

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

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

在这里doc.

Answer 2

我不建议在这种情况下使用网格系统,只需为每个系统添加增加的填充<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.

Answer 3

更改col-md-offset-*到offset-md-*为我工作

Answer 4

在引导程序 3 中，格式为

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

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

col-md-6 offset-md-3

Answer 5

请在 bootstrap 4 中使用offset-md-4而不是使用col-md-offset-4它。 bootstrap 4 中采用的更改很小。

欲了解更多信息