【CSS】bootstrap栅格化是我这么用吗,我用了很多,但是我看别人都没有用这么多啊

我要实现下图这种效果,帮我看一下是我这么写吗,我怎么觉得我用了这么多的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>

回答:

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

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

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

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

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

    <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>这样的块元素就可以了。它们就符合这样的每一个占一行的结构。

回答:

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

回答:

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

回答:

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

回答:

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

回答:

用这么多正常。

回答:

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

以上是 【CSS】bootstrap栅格化是我这么用吗,我用了很多,但是我看别人都没有用这么多啊 的全部内容, 来源链接: utcz.com/a/154446.html

回到顶部