问题在哪里

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-，只需 offset-md-3 ，例如

#!/usr/bin/env python3

此处original code。

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

检查此bootply

这是错误的，因为bootstrap使用margin-left：**％

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

Answer 4

应该是：

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

Answer 5

问题在哪里

在您的HTML中，所有h2都有相同的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>

Answer 6

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

Answer 7

目前，如果你想仅以4列为单位移动一列，我建议只使用一个虚拟占位符，如下例所示

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

Answer 8

在引导程序3中，格式为

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

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

col-md-6 offset-md-3

Answer 9

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

你可以试试这个。

Answer 10

如果你对小调整没问题 - 我们知道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>

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

Answer 11

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

For more info

Bootstrap col-md-offset- *无效

11 个答案:

问题在哪里

如何解决