我要实现下图这种效果,帮我看一下是我这么写吗,我怎么觉得我用了这么多的row和col啊···
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
|
PHP中文网2017-04-10 15:34:20
看了一下,我觉得有这些需要注意的地方:
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
表示极小,也就是始终都认为大于断点,始终水平浮动排列。
代码中的这一部分栅格可能不必要。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
既然这里的设计就是3行,那么直接用3个<p>
或<p>
这样的块元素就可以了。它们就符合这样的每一个占一行的结构。
阿神2017-04-10 15:34:20
有的地方不用row直接用li 来显示,推荐你看个教程:http://www.hubwiz.com/course/554b2aa0d7e0396d67b0a556/