Question

我认为我理解pushing和pulling列的工作方式......但我想我错了。我有以下jsfiddle，我创建了一个非常简单的网格。在xs：

中看起来像这样

保险名称

面对美元

性别

产品

然后当我在sm时，它看起来像这样：

保险名称|面额

性别|产品

到目前为止，我一切都很好。但是，当我到达md时，我需要Face Amount和Gender字段来切换位置。你可以看到（从小提琴）我试图push FaceAmount字段6列（我希望这个字段将被推入下一行），然后pull性别字段6列（因此把它拉起来）。

但是，如果你将小提琴拉到md视点......将FaceAmount列向右推（而不是向下），并将Gender字段向左拉到你不能再看到的地方。

我有什么遗失的东西吗？我本以为，因为我正在推动FaceAmount字段传递它将包裹的12列标记。同样，我希望将性别字段提升到前一行。

Answer 1

我认为你说得对：

我正在推送通过12列标记的FaceAmount字段

此外，您似乎理解使用push和pull。 jsfiddle中的问题是你试图在两个不同的行之间重新排列。例如，您可以使用以下内容推送Insured Name并拉Face Amount

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">  
            <div class="well"> 1 </div>
        </div>
        <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4">
            <div class="well"> 3 </div>
        </div>
        <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4">
            <div class="well"> 2 </div>
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-md-4">
            <div class="well"> 4 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 5 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 6 </div>
        </div>
    </div>
 </div>

结果：

但是，在不同行之间进行操作时，它不会那样工作。来自this文章：

通过设置左侧或右侧属性进行推拉工作时，它将永远不会换行到另一行。

Here是一篇非常好的文章，可以理解推拉是如何工作的。

Answer 2

这项工作！ http://jsfiddle.net/ujrwyrbr/68/

<div class="row">
                            <div class="col-sm-6 col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="row">
                                                <div class="col-xs-6">
                                                    Insured Name:
                                                </div>
                                                <div class="col-xs-6">
                                                    Some Name
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-xs-6">
                                                Face Amount:
                                            </div>
                                            <div class="col-xs-6">
                                                Some Amount
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-6">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-xs-6">
                                                Gender:
                                            </div>
                                            <div class="col-xs-6">
                                                Male
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-xs-6">
                                                Product:
                                            </div>
                                            <div class="col-xs-6">
                                                Some Product
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Answer 3

如果您可以使用col-md-3上的md视口并显示4列，则可以使其正常工作。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="row">
                <div class="col-xs-6 trRight">
                    Insured Name:
                </div>
                <div class="col-xs-6 trLeft">
                    x
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-md-push-3">
            <div class="row">
                <div class="col-xs-6 trRight">
                    Face Amount:
                </div>
                <div class="col-xs-6 trLeft">
                    x
                </div>
            </div>
        </div>


        <div class="col-xs-12 col-sm-6 col-md-3 col-md-pull-3">
            <div class="row">
                <div class="col-xs-6 trRight">
                    Gender:
                </div>
                <div class="col-xs-6 trLeft">
                    x
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="row">
                <div class="col-xs-6 trRight">
                    Product:
                </div>
                <div class="col-xs-6 trLeft">
                    x
                </div>
            </div>
        </div>
    </div>
</div>

还要记住嵌套cols应位于另一个row内。 http://www.codeply.com/go/AMAmnvznK6

Bootstrap列推/拉问题

3 个答案: