javascript - bootstrap栅格化是我这么用吗，我用了很多，但是我看别人都没有用这么多啊

Question

我要实现下图这种效果，帮我看一下是我这么写吗，我怎么觉得我用了这么多的row和col啊···

<code><article class="article">
        <ul>
            <li class="bg-white">
                <p class="row">
                    <p class="col-xs-5">
                        SECRET系列的产品
                    </p>
                    <p class="col-xs-5"></p>
                    <p class="col-xs-2">
                        已付款
                    </p>
                </p>
                <p class="row">
                    <p class="col-xs-3 xm-list-img">
                        <img src="http://www.gbtags.com/gb/laitu/48*45"/>
                    </p>
                    <p class="col-xs-7">
                        <p class="row">
                            <p class="col-xs-12">
                                SECRET系列No.1的商品名
                            </p>
                        </p>
                        <p class="row">
                            <p class="col-xs-12">
                                王波
                            </p>
                        </p>
                        <p class="row">
                            <p class="col-xs-12">
                                塑料，90X120cm
                            </p>
                        </p>
                    </p>
                    <p class="col-xs-2">
                        <p class="row">
                            <col-xs-12>已签收</col-xs-12>
                        </p>
                        <p class="row">
                            <col-xs-12>X1</col-xs-12>
                        </p>
                    </p>
                </p>
                <p class="row">
                    <p class="col-xs-3 xm-list-img">
                        <img src="http://www.gbtags.com/gb/laitu/48*45"/>
                    </p>
                    <p class="col-xs-7">
                        <p class="row">
                            <p class="col-xs-12">
                                SECRET系列No.1的项目名
                            </p>
                        </p>
                        <p class="row">
                            <p class="col-xs-12">
                                王波
                            </p>
                        </p>
                        <p class="row">
                            <p class="col-xs-12">
                                2014年，油画，90X120cm
                            </p>
                        </p>
                    </p>
                    <p class="col-xs-2">
                        <p class="row">
                            <col-xs-12>未分配</col-xs-12>
                        </p>
                        <p class="row">
                            <col-xs-12>X2</col-xs-12>
                        </p>
                    </p>
                </p>
                <p class="row">
                    <p class="col-xs-5">
                        合计：￥150.00
                    </p>
                    <p class="col-xs-7">
                        <span>查看收益</span>
                        <span>查看详情</span>
                    </p>
                </p>
            </li>
            <li class="bg-white">
                <p class="row">
                    <p class="col-xs-5">
                        SECRET系列的产品
                    </p>
                    <p class="col-xs-5"></p>
                    <p class="col-xs-2">
                        已付款
                    </p>
                </p>
                <p class="row">
                    <p class="col-xs-3 xm-list-img">
                        <img src="http://www.gbtags.com/gb/laitu/48*45"/>
                    </p>
                    <p class="col-xs-7">
                        <p class="row">
                            <p class="col-xs-12">
                                SECRET系列No.1的商品名
                            </p>
                        </p>
                        <p class="row">
                            <p class="col-xs-12">
                                王波
                            </p>
                        </p>
                        <p class="row">
                            <p class="col-xs-12">
                                塑料，90X120cm
                            </p>
                        </p>
                    </p>
                    <p class="col-xs-2">
                        <p class="row">
                            <col-xs-12></col-xs-12>
                        </p>
                        <p class="row">
                            <col-xs-12>X1</col-xs-12>
                        </p>
                    </p>
                </p>
                <p class="row">
                    <p class="col-xs-5">
                        合计：￥150.00
                    </p>
                    <p class="col-xs-7">
                        <span>支付</span>
                    </p>
                </p>
            </li>
        </ul>
    </article>
</code>

Answer 1

看了一下，我觉得有这些需要注意的地方：

1. Bootstrap的栅格嵌套。 正确的做法是， 最外层有一个.container或.container-fluid，然后子元素接.row，再下面是.col。如果在内部还有更多的栅格细分，继续在.col内接.row，再接.col（.container不再使用）。所以，题主的.row和.col的嵌套是正确的，但最外层少了.container或.container-fluid。 至于用了很多的.col和.row，嵌套的时候就会有很多，没问题的。

   推荐阅读这篇 Bootstrap 栅格系统的精妙之处。

2. xs、md这些表示column的类型的词的意义。 Bootstrap的栅格系统的设计中，有一个断点区分的设计， 断点从小到大依次是 xs、 sm、 md、 lg。低于这个断点，布局块都会竖直堆叠起来，高于或等于这个断点，则定义了float，会水平排列。其中xs表示极小，也就是始终都认为大于断点，始终水平浮动排列。

3. 代码中的这一部分栅格可能不必要。

   <code><p class="row">
       <p class="col-xs-12">
           SECRET系列No.1的商品名
       </p>
   </p>
   <p class="row">
       <p class="col-xs-12">
           王波
       </p>
   </p>
   <p class="row">
       <p class="col-xs-12">
           塑料，90X120cm
       </p>
   </p>
   </code>

   既然这里的设计就是3行，那么直接用3个<p>或<p>这样的块元素就可以了。它们就符合这样的每一个占一行的结构。

Answer 2

大神们帮帮我吧，这个是工作，不知道怎么搞，急死了··

Answer 3

有的地方不用row直接用li 来显示，推荐你看个教程：http://www.hubwiz.com/course/554b2aa0d7e0396d67b0a556/

Answer 4

每一行用form-group 不用没行都用row row只定义一个就可以了。还有col-xs 是超小屏幕的类

Answer 5

可以使用.pull-right，.media等类

Answer 6

用这么多正常。

Answer 7

其实你变化下浏览器的窗口大小，看你的布局是怎么变动的，就知道自己是否使用正确了。