css - 跨度内的 Bootstrap 跨度

Question

我很难理解如何使用 bootstrap 将 span 放入 span 中。

我想让一个 block 居中，里面有:

-一排里面:
- 左边一个街区 (span6) -右边一个街区(span6)

-一排里面: -一个按钮居中(span 6 offset3)

你可以在这里看到问题: http://jsfiddle.net/UBTv4/18/

<div class='row'>
<div class='span6 offset3'>
    <div class='well'>
        <h2>Title</h2>      
            <div class='row'>
                <div class='span6'>
                    <p class="lead">Bloc left : </p>
                </div>              
                <div class='span6'>
                    <p class="lead">Bloc right : </p>
                </div>
            </div>
            <div class='row'>
                <div class='span6 offset3'>
                    <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                </div>
            </div>
    </div>
</div>

问题是什么？

我想要这样的东西:

Answer 1

这是您的解决方案。

<div class='row'>
    <div class='span6 offset3 well' >  <!-- .well class here instead of inner div -->
            <h2>Title</h2>      
                <div class='row'>
                    <div class='span3'> <!-- instead of span6 -->
                        <p class="lead">Bloc left : </p>
                    </div>              
                    <div class='span3'> <!-- instead of span6 -->
                        <p class="lead">Bloc right : </p>
                    </div>
                </div>
                <div class='row'>
                    <div class='span3 offset3'>  <!-- instead of span6 -->
                        <input id="play" type="submit" value="play" class="btn btn-primary"/>       
                    </div>
                </div>
        </div>
</div>

http://jsfiddle.net/UBTv4/23/

作为解释，我建议您仔细阅读此链接中的嵌套列部分:

http://getbootstrap.com/2.3.2/scaffolding.html

简而言之，如果您在 span6 中嵌套行，则内部行跨度的总和也应为 6 (3+3)。

.well 类也有一些填充/marings，所以你不能在父级和嵌套行/跨度“之间”。