我要实现下图这种效果,帮我看一下是我这么写吗,我怎么觉得我用了这么多的row和col啊···
<article class="article"> <ul> <li class="bg-white"> <div class="row"> <div class="col-xs-5"> SECRET系列的产品 </div> <div class="col-xs-5"></div> <div class="col-xs-2"> 已付款 </div> </div> <div class="row"> <div class="col-xs-3 xm-list-img"> <img src="http://www.gbtags.com/gb/laitu/48*45"/> </div> <div class="col-xs-7"> <div class="row"> <div class="col-xs-12"> SECRET系列No.1的商品名 </div> </div> <div class="row"> <div class="col-xs-12"> 王波 </div> </div> <div class="row"> <div class="col-xs-12"> 塑料,90X120cm </div> </div> </div> <div class="col-xs-2"> <div class="row"> <col-xs-12>已签收</col-xs-12> </div> <div class="row"> <col-xs-12>X1</col-xs-12> </div> </div> </div> <div class="row"> <div class="col-xs-3 xm-list-img"> <img src="http://www.gbtags.com/gb/laitu/48*45"/> </div> <div class="col-xs-7"> <div class="row"> <div class="col-xs-12"> SECRET系列No.1的项目名 </div> </div> <div class="row"> <div class="col-xs-12"> 王波 </div> </div> <div class="row"> <div class="col-xs-12"> 2014年,油画,90X120cm </div> </div> </div> <div class="col-xs-2"> <div class="row"> <col-xs-12>未分配</col-xs-12> </div> <div class="row"> <col-xs-12>X2</col-xs-12> </div> </div> </div> <div class="row"> <div class="col-xs-5"> 合计:¥150.00 </div> <div class="col-xs-7"> <span>查看收益</span> <span>查看详情</span> </div> </div> </li> <li class="bg-white"> <div class="row"> <div class="col-xs-5"> SECRET系列的产品 </div> <div class="col-xs-5"></div> <div class="col-xs-2"> 已付款 </div> </div> <div class="row"> <div class="col-xs-3 xm-list-img"> <img src="http://www.gbtags.com/gb/laitu/48*45"/> </div> <div class="col-xs-7"> <div class="row"> <div class="col-xs-12"> SECRET系列No.1的商品名 </div> </div> <div class="row"> <div class="col-xs-12"> 王波 </div> </div> <div class="row"> <div class="col-xs-12"> 塑料,90X120cm </div> </div> </div> <div class="col-xs-2"> <div class="row"> <col-xs-12></col-xs-12> </div> <div class="row"> <col-xs-12>X1</col-xs-12> </div> </div> </div> <div class="row"> <div class="col-xs-5"> 合计:¥150.00 </div> <div class="col-xs-7"> <span>支付</span> </div> </div> </li> </ul> </article>
解决方案
看了一下,我觉得有这些需要注意的地方:
Bootstrap的栅格嵌套。 正确的做法是, 最外层有一个
.container
或.container-fluid
,然后子元素接.row
,再下面是.col
。如果在内部还有更多的栅格细分,继续在.col
内接.row
,再接.col
(.container
不再使用)。所以,题主的.row
和.col
的嵌套是正确的,但最外层少了.container
或.container-fluid
。 至于用了很多的.col
和.row
,嵌套的时候就会有很多,没问题的。推荐阅读这篇 Bootstrap 栅格系统的精妙之处。
xs
、md
这些表示column的类型的词的意义。 Bootstrap的栅格系统的设计中,有一个断点区分的设计, 断点从小到大依次是xs
、sm
、md
、lg
。低于这个断点,布局块都会竖直堆叠起来,高于或等于这个断点,则定义了float
,会水平排列。其中xs
表示极小,也就是始终都认为大于断点,始终水平浮动排列。代码中的这一部分栅格可能不必要。
<div class="row"> <div class="col-xs-12"> SECRET系列No.1的商品名 </div></div><div class="row"> <div class="col-xs-12"> 王波 </div></div><div class="row"> <div class="col-xs-12"> 塑料,90X120cm </div></div>
既然这里的设计就是3行,那么直接用3个
<div>
或<p>
这样的块元素就可以了。它们就符合这样的每一个占一行的结构。