Bootstrap 3 réactive avec de multiples points de rupture

Je suis en utilisant les dernières Bootstrap 3.0 RC1 et d'essayer de construire une image d'aperçu de la réactivité et de multiples points de rupture lorsque les images devient trop petit (comme vu sur Dribbble).

Questions:

L'échelle de l'image n'apparaît que lorsqu'il y a deux ou moins sur une ligne (il devrait travailler avec les 3-4 images)
Mes lignes de cassure OU de la réactivité de provoquer des différentes tailles d'image. J'ai besoin de faire en sorte que le max img taille après les pauses, c'est la même que la taille max quand il y a 4 sur une ligne. Exemple lors de la séparation en deux ou l'une de ces images, initialement, semblent beaucoup plus grande que la plus grande taille avec 4 dans une rangée.

J'espère que quelqu'un peut m'aider, je suis un débutant à la construction d'sensible des trucs..

En ce qui concerne meilleur

Lien vers jsfiddle:

http://jsfiddle.net/6dckB/ (votre navigateur doit être large pour voir les effets)

HTML:

<div class="container">
<ul class="row-fluid">
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
</ul>
</div>

CSS:

.row-fluid {
padding-left: 0;
list-style: none;
}
.row-fluid:before,
.row-fluid:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.row-fluid:after {
clear: both;
}
.row-fluid:before,
.row-fluid:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.row-fluid:after {
clear: both;
}
@media (min-width: 768px) {
.row-fluid {
margin-left: -10px;
margin-right: -10px;
}
}
.row-fluid .row {
margin-left: -10px;
margin-right: -10px;
}
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 50%;
margin-bottom: 20px;
}
@media (max-width: 400px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 33.33333333333333%;
}
}
@media (min-width: 992px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 25%;
}
}

double possible de: stackoverflow.com/questions/16879676/...

OriginalL'auteur charliexx | 2013-07-28

12

Il n'apparaît pas que vous êtes en utilisant Bootstrap 3 RC1. Le lien dans votre violon est cassé. Bootstrap RC1 n'a pas .row-fluid plus.

Vous pouviez juste de simplifier tout en laissant de la réactivité des fonctionnalités en 3 de faire le travail pour vous. BS3 a maintenant 3 tailles de grille-petit, petites et grandes, qui sont utilisés pour manipuler l'affichage sur différents appareils /largeurs. Vous pourriez faire quelque chose comme ça..
```
<div class="row">
<div class="col-lg-3 col-sm-4 col-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-sm-4 col-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
...
</div>
```
Que vous obtiendrez..
- 4 par ligne sur les grands écrans (col-lg-3)
- 3 par ligne sur les tablettes (col-sm-4)
- 2 par rangée sur "minuscule" téléphones (col-6)
Démo: http://bootply.com/70929

Depuis la relase col-6 devrait être col-xs-6
Thx, j'ai mis à jour la démo bootply.com/70929 pour utiliser xs classes.

OriginalL'auteur Zim
1

Juste changé un peu de css et ça marche. Voir ce violon: http://jsfiddle.net/J3F99/

Bien, les changements majeurs:
1. box-sizing: border-box .groupe, de sorte que le % de la largeur est inclusive de la marge intérieure(10px).
2. Ajouté display: inline-block et à supprimer les float: left.groupe, et text-align: center.de la ligne de liquide, afin que le .des éléments du groupe sont alignées au centre.
3. Ajouté max-width: 350px et max-height: 150px.groupe
4. Ajusté % largeurs pour les différentes tailles d'écran pour prendre la pleine largeur et en maintenant toujours le max-width
5. Nettoyé css media queries en supprimant les doublons de propriétés qui est déjà hérité d'un style commun .groupe pour tous les écrans
C'est tout. Il fonctionne bien dans chrome. J'din pas de test dans d'autres navigateurs. L'utilisation complète de bootstrap lors des tests.

Le principal problème ici est le rembourrage, donnée en pixels. Pour s'assurer que le nettoyage de fluide de mise en page, vous devez utiliser % au lieu de cela, si pixels. Et pour cela vous devez utiliser la marge plutôt que de rembourrage pour .groupe. Car, marge en % dépend de la largeur du conteneur.

Par exemple, 4 .des éléments du groupe avec une largeur de 20% et de la marge à droite et à la marge de gauche de 2,5% s'adapter exactement au sein du conteneur(.row-fluid ici), sans laisser un seul pixel.

4*20 + 4*2.5*2 = 100%

Je vous recommande d'aller avec cette méthode. Voir @Bharat Parmar de réponse pour cela.

OriginalL'auteur Jithesh

Vérifier cette démo:
http://depotwebdesigner.com/responsive/

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Responsive Image</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<!-- Responsive Image -->
<div class="container">
<div class="starter-template">
<ul>
<li><img src="http://dribbble.s3.amazonaws.com/users/31348/screenshots/1185698/slightly_stoopid_teaser.jpg" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/12/screenshots/1185739/google_chromescreensnapz001_teaser.png" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/22225/screenshots/1185692/cooper_workshop_teaser.jpg" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/565/screenshots/1186432/kreyos_sport_mode_1x.jpg" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/6014/screenshots/1186351/oliver.jpg" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/93631/screenshots/1185715/drip-lion.jpg" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/104062/screenshots/1186702/pw_1x.png" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/7528/screenshots/1186361/genesisproject_1x.jpg" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/2896/screenshots/1186026/free_to_be_1x.png" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/2559/screenshots/1185760/screen_shot_2013-08-06_at_10.32.27_am.png" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/4737/screenshots/1178958/untitled-1_1x.png" alt=""></li>
<li><img src="http://dribbble.s3.amazonaws.com/users/4737/screenshots/1186176/site_1x.jpg" alt=""></li>
</ul>
</div>
</div>

CSS:

body {
padding-top: 50px;
background: #f8f8f8;
}
img {  
max-width: 100%;
max-height: 150px;
}
ul{
padding: 0;
}
.content {
width: 970px;
margin: 0 auto;
}
.starter-template {
margin-top: 10px;
}
.starter-template li {
width: 20%;
position: relative;
float:left;
list-style: none;
background: #fff;
padding: 10px;
margin-bottom: 20px;
margin-right: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
@media (max-width: 315px) {
.starter-template li {
margin: 0 0 3px 3px !important;
}
}
@media (max-width: 735px) and (min-width: 450px) {
.starter-template li {
width: 30%;
margin-right: 0;
margin-left: 15px;
}
}
@media (max-width: 450px) {
.starter-template li {
width: 45%;
margin-right: 20px; 
margin-left: 10px;
}
.starter-template li:nth-child(2n){
margin-left: 0;
margin-right: 0;
}
}

jsfiddle: http://jsfiddle.net/VJBjL/5/

OriginalL'auteur Arbaoui Mehdi

Vous devez vous connecter pour publier un commentaire.