[Boostrap] Grille non fixe

**hannibal.76** · 04/07/2014, 11h01

Bonjour,

je suis en train d'apprendre à utiliser Bootstrap3 sur un petit projet.

Plutôt que de long discours voici une image de mon problème.
Nom : 197973imgPbm.png
Affichages : 181
Taille : 464,0 Ko

Nom : 197973imgPbm.png
Affichages : 181
Taille : 464,0 Ko

Donc mon problème est que je voudrais que la troisième "pseudo ligne" n'existe pas. Bref que tous les lignes soit complètes.

Pour chaque livre j'ai ce type de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<div class="col-md-4">
                        <div class="well well-sm">
                            <div class="row">
                                <div class="col-xs-3 col-md-3 text-center">
                                    <a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
                                        <img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-xs-9 col-md-9 section-box">
                                    <h3>title</h3>
                                    </h3>
                                    <p class="visible-md visible-lg clearfix">
                            comment
                                    </p>
                                    <hr />
                                    <div class="row rating-desc visible-md visible-lg">
                                        <div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
                                            <span class="fa fa-star"><span class="fa fa-star">
                                        </div>
                                        <div class="col-md-offset-4 col-md-4">
                                            <span class="fa fa-language"></span> Fr
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Et voici un exemple complet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>...</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.3.1/holder.min.js"></script>
 
    </head>
    <body>
        <div class="container-fluid">
            <header class="row">
                <div class="col-md-12">
                    <div class="page-header">
                        <h1>...</h1>
                    </div>
                </div>
            </header>
            <div class="row">
                <nav class="col-md-2">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Filtre :</h3>
                        </div>
                        <div class="list-group">
                            <a href="#" class="list-group-item">Authors</a>
                            <a href="#" class="list-group-item">Tags</a>
                            <a href="#" class="list-group-item">....</a>
                        </div>
                    </div>
                </nav>
                <section class="col-md-10">
 
                <!-- For each book -->
                    <div class="col-md-4">
                        <div class="well well-sm">
                            <div class="row">
                                <div class="col-xs-3 col-md-3 text-center">
                                    <a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
                                        <img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-xs-9 col-md-9 section-box">
                                    <h3>title</h3>
                                    </h3>
                                    <p class="visible-md visible-lg clearfix">
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan purus, sit amet sodales turpis. Curabitur sit amet quam ut orci auctor vestibulum. Nullam ornare, tortor sit amet semper blandit, lacus felis accumsan sem, in semper leo enim at mi. Maecenas ut mi libero. Vivamus facilisis neque eget ante dictum mollis. Phasellus feugiat mi vel nisi molestie luctus. Donec eget tempor magna. Nunc molestie dapibus hendrerit.
 
Aenean quis blandit turpis. Duis nec lorem interdum, aliquam magna in, semper massa. Quisque vel pellentesque leo, vitae tempor erat. Donec feugiat feugiat justo, in porta ligula feugiat sed. Pellentesque auctor nibh ac felis faucibus dapibus. Duis luctus pulvinar lacinia. Aliquam a accumsan lorem. Donec in vehicula nulla. Donec a fringilla quam. Suspendisse quis tristique justo. Praesent eget eros pretium nulla egestas luctus. Mauris in risus vel nunc laoreet venenatis quis in orci. Donec adipiscing libero lectus. 
                                    </p>
                                    <hr />
                                    <div class="row rating-desc visible-md visible-lg">
                                        <div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
                                            <span class="fa fa-star"><span class="fa fa-star">
                                        </div>
                                        <div class="col-md-offset-4 col-md-4">
                                            <span class="fa fa-language"></span> Fr
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- End Book -->
 
                <!-- For each book -->
                    <div class="col-md-4">
                        <div class="well well-sm">
                            <div class="row">
                                <div class="col-xs-3 col-md-3 text-center">
                                    <a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
                                        <img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-xs-9 col-md-9 section-box">
                                    <h3>title</h3>
                                    </h3>
                                    <p class="visible-md visible-lg clearfix">
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan purus, sit amet sodales turpis. Curabitur sit amet quam ut orci auctor vestibulum. Nullam ornare, tortor sit amet semper blandit, lacus felis accumsan sem, in semper leo enim at mi. Maecenas ut mi libero. Vivamus facilisis neque eget ante dictum mollis. Phasellus feugiat mi vel nisi molestie luctus. Donec eget tempor magna. Nunc molestie dapibus hendrerit.
 
Aenean quis blandit turpis. Duis nec lorem interdum, aliquam magna in, semper massa. Quisque vel pellentesque leo, vitae tempor erat. Donec feugiat feugiat justo, in porta ligula feugiat sed. Pellentesque auctor nibh ac felis faucibus dapibus. Duis luctus pulvinar lacinia. Aliquam a accumsan lorem. Donec in vehicula nulla. Donec a fringilla quam. Suspendisse quis tristique justo. Praesent eget eros pretium nulla egestas luctus. Mauris in risus vel nunc laoreet venenatis quis in orci. Donec adipiscing libero lectus. 
                                    </p>
                                    <hr />
                                    <div class="row rating-desc visible-md visible-lg">
                                        <div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
                                            <span class="fa fa-star"><span class="fa fa-star">
                                        </div>
                                        <div class="col-md-offset-4 col-md-4">
                                            <span class="fa fa-language"></span> Fr
                                        </div>
                                    </div>
                                </div>
                            </div>
 
                        </div>
                    </div>
                <!-- End Book -->
 
                <!-- For each book -->
                    <div class="col-md-4">
                        <div class="well well-sm">
                            <div class="row">
                                <div class="col-xs-3 col-md-3 text-center">
                                    <a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
                                        <img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-xs-9 col-md-9 section-box">
                                    <h3>title</h3>
                                    </h3>
                                    <p class="visible-md visible-lg clearfix">
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan 
                                    </p>
                                    <hr />
                                    <div class="row rating-desc visible-md visible-lg">
                                        <div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
                                            <span class="fa fa-star"><span class="fa fa-star">
                                        </div>
                                        <div class="col-md-offset-4 col-md-4">
                                            <span class="fa fa-language"></span> Fr
                                        </div>
                                    </div>
                                </div>
                            </div>
 
                        </div>
                    </div>
                <!-- End Book -->
 
                <!-- For each book -->
                    <div class="col-md-4">
                        <div class="well well-sm">
                            <div class="row">
                                <div class="col-xs-3 col-md-3 text-center">
                                    <a class="showTootlips" href="" target="_blank" title="Show all descriptions" data-toggle="tooltip" data-placement="bottom" >
                                        <img src="holder.js/300x200" alt="Book cover " class="img-responsive" />
                                    </a>
                                </div>
                                <div class="col-xs-9 col-md-9 section-box">
                                    <h3>title</h3>
                                    </h3>
                                    <p class="visible-md visible-lg clearfix">
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet tortor vitae tincidunt posuere. Aliquam aliquet augue sed libero tempus, eu suscipit nunc sodales. Ut eget nunc justo. Aenean urna massa, elementum ac gravida egestas, luctus sed eros. Suspendisse eu posuere tellus. Phasellus magna velit, congue et mollis id, faucibus non est. Donec sit amet tristique elit, eu posuere arcu. Nunc non accumsan purus, sit amet sodales turpis. Curabitur sit amet quam ut orci auctor vestibulum. Nullam ornare, tortor sit amet semper blandit, lacus felis accumsan sem, in semper leo enim at mi. Maecenas ut mi libero. Vivamus facilisis neque eget ante dictum mollis. Phasellus feugiat mi vel nisi molestie luctus. Donec eget tempor magna. Nunc molestie dapibus hendrerit.
 
Aenean quis blandit turpis. Duis nec lorem interdum, aliquam magna in, semper massa. Quisque vel pellentesque leo, vitae tempor erat. Donec feugiat feugiat justo, in porta ligula feugiat sed. Pellentesque auctor nibh ac felis faucibus dapibus. Duis luctus pulvinar lacinia. Aliquam a accumsan lorem. Donec in vehicula nulla. Donec a fringilla quam. Suspendisse quis tristique justo. Praesent eget eros pretium nulla egestas luctus. Mauris in risus vel nunc laoreet venenatis quis in orci. Donec adipiscing libero lectus. 
                                    </p>
                                    <hr />
                                    <div class="row rating-desc visible-md visible-lg">
                                        <div class='col-md-4 showTootlips' title='rating' data-toggle='tooltip' data-placement='top'>
                                            <span class="fa fa-star"><span class="fa fa-star">
                                        </div>
                                        <div class="col-md-offset-4 col-md-4">
                                            <span class="fa fa-language"></span> Fr
                                        </div>
                                    </div>
                                </div>
                            </div>
 
                        </div>
                    </div>
                <!-- End Book -->
            </section>
        </div>
    </body>
</html>

Donc, voila je ne sais pas somment résoudre se problème esthétique.

Auriez-vous une idée ?

Je vous remercie par avance de votre aide

**livingxworld** · 16/09/2014, 21h45

Très simple,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>...</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
    </head>
    <body>
 
<div class="container">
   <h2>Exemple grll</h2>
<!--------Block 2-------->
<div class="row">
<div class="col-sx-6 col-sm-6 col-md-6 col-lg-6">
colonne left
</div>
<div class="col-sx-6 col-sm-6 col-md-6 col-lg-6">
colonne right
</div>
<div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
<div class="col-sx-12 col-sm-12 col-md-12 col-lg-12">
full
</div>
</div>
</div>
    </body>
</html>

[Boostrap] Grille non fixe

HTML

Discussions similaires

Partager

Partager