html - 嵌套 div 居中的 Bootstrap 问题

Question

我正在尝试将嵌套的 div 置于包装器内部的 Bootstrap 中。

基本上它会粘在我的 wrapper 的左侧，而不是相对居中。

HTML:

<div class="wrapper center-block">  
<P>
The panels below need to be centered so they dont stay left.
They aren't supposed to line up with this paragraph, but be offset so that it looks "fluid"<br />
i.e. stop here<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v
</P>
<div class="row">
    <div class="col-lg-8 center-block">
        <!-- WHY WONT THIS NESTED DIV CENTER!?-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><strong>Test panel </strong></h3>
            </div>
            <div class="panel-body">
                test
            </div>
        </div>
    </div>
</div>
<div class="panel-footer col-sm-10 center-block">
    <p><small>test footer</small>
    </p>
</div>
</div>
<!-- /container -->

CSS:

.wrapper{
    max-width:1200px;
    float: none;
    margin: 0 auto;
}

我正在考虑制作另一个 包装器，但这似乎太过分了。还有别的办法吗？

Answer 1

有了 Css，你可以使用 span 来放置文本，它会缩小它。然后你可以用 margin-left:auto; 居中margin-right:auto; 或 div(需要一个 width)并做同样的事情。如果是文本，则 text-align:center;

希望对您有所帮助!