찾다

 >  Q&A  >  본문

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

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

<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>

阿神阿神2896일 전449

모든 응답(7)나는 대답할 것이다

  • PHP中文网

    PHP中文网2017-04-10 15:34:20

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

    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. 代码中的这一部分栅格可能不必要。

      1

      2

      3

      4

      5

      6

      7

      8

      9

      10

      11

      12

      13

      14

      15

      16

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

    회신하다
    0
  • 阿神

    阿神2017-04-10 15:34:20

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

    회신하다
    0
  • 阿神

    阿神2017-04-10 15:34:20

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

    회신하다
    0
  • 阿神

    阿神2017-04-10 15:34:20

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

    회신하다
    0
  • ringa_lee

    ringa_lee2017-04-10 15:34:20

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

    회신하다
    0
  • PHPz

    PHPz2017-04-10 15:34:20

    用这么多正常。

    회신하다
    0
  • 迷茫

    迷茫2017-04-10 15:34:20

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

    회신하다
    0
  • 취소회신하다