0

我很难理解如何使用引导程序将跨度放在跨度内。

我想要一个块居中，内部：

- 内有一行：
- 左侧一格 (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>

问题是什么 ？

我想要这样的东西：

在此处输入图像描述

4

3 回答 3

3

这是您的解决方案。

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

于 2013-05-11T18:10:14.863 回答
0

您还可以使用 pull-right 和 pull-left 使相应的块左右移动。

</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/

于 2013-05-11T17:52:15.867 回答
0

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

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

于 2013-05-11T11:51:34.277 回答