Question

我最近开始使用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;
}

对不起，如果解决方案非常简单，但我是初学网站开发人员。

Answer 1

您已将您的jumbotron的大小设置为8列中＆＃39;中＆＃39;以及（col-md-8）没有抵消。这意味着屏幕变得比Bootstrap类更大，因为＆＃39; Medium＆＃39;它将从100％变为8/12s宽度。

如果你想要这个宽度，那么添加一个偏移等级2（col-md-offset-2），或者你可以摆脱你的col-md-8以强制它始终为100％，无论设备宽度如何，如本例所示 - http://jsfiddle.net/g8LUy/1/

全宽jumbtron

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

＆＃39; 8 / 12ths＆＃39;宽度jumbotron

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

您可以在他们的网站上阅读有关Bootstrap网格系统和各种抵消课程的更多信息。＆＃39; CSS＆＃39;页面＆＃39;网格系统＆＃39; - http://getbootstrap.com/css/#grid

Jumbotron无法集中

1 个答案: