引导程序col-md-offset- *不起作用 [英] Bootstrap col-md-offset-* not working

问题描述

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

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

Html：

 < div class =jumbotron> 
< div class =container> 
< div class =row> 
< div> 
< h2 class =col-md-4 col-md-offset-4>浏览。< / 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; 
宽度：100％; 
 background-image：url（img / bg.jpg）; 
 background-size：cover; 
 background-position：center; 
} 
 
 .jumbotron h2 {
颜色：白色; 
 font-size：60px; 
} 
 
 .jumbotron h2：第一个孩子{
 margin：120px 0 0; 
} 
  

请指导我。提前感谢您。

$ b $在这种情况下，我不会推荐使用网格系统，就像简单地为每个< 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>两个< / h2> 
< / div> 
 
< div class =col-md-10 col-md-offset-2> 
< h2>三< / h2> 
< / div> 
< / div> 
< / div> 
< / div> 
  

基本上第一行必须跨越整行（so -12）。第二行必须偏移1列，所以你偏移1，并给它一个11列的总宽度（11 + 1 = 12）等等。您的抵消总是足以确保总列数等于12。

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

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:

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

解决方案

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:

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

这篇关于引导程序col-md-offset- *不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！