Question

我有一些困难要理解如何将跨度放入跨度中使用bootstrap。

我希望将一个块置于中心位置：

- 内有一行：
- 左边一个街区（span6） - 右边的一个区块（span6）

- 内部一行： - 一个按钮居中（跨度6偏移3）

你可以在这里看到问题： 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>

有什么问题？

我想要这样的东西：

enter image description here

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类有一些填充/行为，所以你不能在“父”和嵌套行/跨度之间。

Answer 2

我认为您想要使用.row-fluid。这将使你的2 .span6成为一行。

这是更新的小提琴：http://jsfiddle.net/skelly/UBTv4/22/

Answer 3

你也可以使用右拉和左拉来使各个块左右移动。

</div>              
                <div class='span6'>
                    <p class="lead pull-right">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>

您可以在此处查看代码：http://jsfiddle.net/UBTv4/18/

跨度内的Bootstrap跨度

3 个答案: