Html Bootstrap col-md-offset-* 不起作用

Bootstrap col-md-offset-* not working

提问by Aisha Salman

I'm trying to add Bootstrap offset class in my code to achieve diagonal alignment like this:

我试图在我的代码中添加 Bootstrap 偏移类来实现这样的对角线对齐：

But I don't know what offset should I use. I've tried couple of offsets to achieve this but no use.Text is covering whole jumbotron.Here is my code

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

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:

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

Please guide me.Thank you in advance.

请指导我。在此先感谢您。

采纳答案by Robert

I would not recommend utilizing the Grid system in this instance, as much as simply adding an increased padding for each <h2>. That being said, the way you would achieve this using col-*-offset-*would be as follows:

我不建议在这种情况下使用 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>

Essentially the first line must span the entire row (so -12). The second line must be offset by 1 column, so you offset by 1 and give it a total width of 11 columns (11+1 = 12) and so forth. Your offset is always enough to ensure that the total column count equals 12.

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

回答by Vasyl Gutnyk

It works in bootstrap 4, there were some changes in documentation.We don't need prefix col-, just offset-md-3e.g.

它适用于引导程序 4，文档中有一些更改。我们不需要前缀 col-，只需要offset-md-3例如

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

Here doc.

这里医生。

回答by sriram26

Changing col-md-offset-*to offset-md-*worked for me

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

回答by Maravarman Manoharan

In bootstrap 3 the format is

在引导程序 3 中，格式为

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

For the same grid in Bootstrap 4 the format is

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

col-md-6 offset-md-3

回答by Anand Raja

Kindly use offset-md-4instead of col-md-offset-4in bootstrap 4. It's little changes adopted in bootstrap 4.

请在引导程序 4 中使用offset-md-4而不是使用col-md-offset-4。引导程序 4 中采用的更改很小。

For more info

欲了解更多信息

回答by Cem Arguvanl?

check this bootply

检查这个引导

this is wrong because bootstrap using margin-left:**%

这是错误的，因为引导程序使用 margin-left:**%

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

回答by MrGeek

Should be :

应该 ：

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

回答by Daniele Barresi

Where's the problem

问题出在哪里

In your HTML all h2s have the same off-set of 4 columns, so they won't make a diagonal.

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

How to fix it

如何修复

A rowhas 12 columns, so we should put every h2in it's own row. You should have something like this:

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

An alternative is to make every h2width plus offset sum 12 columns, so each one automatically wraps in a new line.

另一种方法是使每个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>

回答by user947668

Bootstrap 4 offset classes have been removed in Beta 1, but will be restored in Beta 2 - topic reference

Bootstrap 4 偏移类已在 Beta 1 中删除，但将在 Beta 2 中恢复 - 主题参考

回答by lionelsanou

For now, If you want to move a column over just 4 column units for instance, I would suggest to use just a dummy placeholder like in my example below

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

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