Jumbotron无法居中显示

Question

Jumbotron无法居中显示

3

我最近开始使用Bootstrap。我在居中Jumbotron方面遇到了问题。我现在无法发布图片作为示例，因为我需要10个声望值。我的代码：

<div class="container">
        <div class="col-md-8 jumbotron center">
            <h1>Jumbotron heading</h1>
            <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
        </div>
    </div>

我的CSS：

.jumbotron {
    border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
    padding: 14px 24px;
    font-size: 21px;
}

.center{
    text-align: center;
}

非常抱歉，如果解决方案过于简单，但我是初学者网页开发者。

- user3528818

1

你能具体说明一下你的问题吗？在这里看起来它是居中的：http://jsfiddle.net/g8LUy/ - TylerH

我认为我应该改变容器的宽度。这可能是解决方案吗？ - user3528818

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob Quincey · Accepted Answer

你已将jumbotron的大小设置为'medium'及以上的8列（col-md-8），没有偏移。这意味着屏幕尺寸大于Bootstrap定义的“中等”时，它会从100%的宽度变为8/12的宽度。

如果你想要这个宽度，则添加2的偏移类（col-md-offset-2），或者你可以去掉col-md-8，以便强制它始终为100%，而不管设备宽度如何，就像这个例子 - http://jsfiddle.net/g8LUy/1/ 全宽jumbotron

<div class="container">
    <div class="jumbotron center">
    ...your jumbtron html
   </div>
</div>

宽度为'8/12ths'的jumbotron

<div class="container">
    <div class="jumbotron col-md-8 col-md-offset-2 center">
    ...your jumbtron html
   </div>
</div>

您可以在Bootstrap网站的“CSS”页面下的“Grid system”中了解更多关于Bootstrap网格系统和各种偏移类的信息 - http://getbootstrap.com/css/#grid