1485 sujets

Web Mobile et responsive web design

Soucis de marge ou padding en col-sm boostrap

Bonjour à tous!

Bon là j'en peux plus, j'ai plus de yeux Smiley eek

J'ai deux problèmes en col-sm

En fait, pour les class read et profil, j'ai l'impression qu'il y a des marges ou des padding de mis

Aux lignes (de mon css, boot3.css), 291 (pour la class read), et 307 (pour la class profil), j'ai l'impression qu'on me met automatiquement des marges...

Je voudrais les décaller pour qu'elles soient bien alignées avec le caroussel

Voici mon url, vous allez voir (en col-sm) : http://vaurel.free.fr/bootstrap/test3.html

C'est plus flagrant avec les class profil
Il y a de l'espace entre elles ce qui fait que je ne peux pas les décaller comme je veux


Avez-vous une idée?

Merci d'avance !!
Modifié par 6l20 (04 Feb 2015 - 08:17)
en gros en tout ça fait environ 83%
mais si je rajoute des marges pour arriver à 100%, techniquement ça devrait le faire

donc j'ai fait : 



<div class="profil col-lg-2 col-md-2 col-sm-2">
      <div class="image-point col-lg-2 col-md-9 col-sm-11">
             <img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu1">
       </div>
       <div class="col-lg-12 col-md-11 col-sm-11">
            <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
             <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
        </div>
</div>
<div class="profil col-lg-2 col-md-2 col-sm-2">
        <div class="image-point col-lg-2 col-md-9 col-sm-11">
             <img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu2">
        </div>
         <div class="col-lg-12 col-md-11 col-sm-11">
             <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
             <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
          </div>
</div>
<div class="profil col-lg-2 col-md-2 col-sm-2">
      <div class="image-point col-lg-2 col-md-9 col-sm-11">
             <img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu1">
       </div>
       <div class="col-lg-12 col-md-11 col-sm-11">
            <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
             <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
        </div>
</div>
<div class="profil col-lg-2 col-md-2 col-sm-2">
      <div class="image-point col-lg-2 col-md-9 col-sm-11">
             <img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu1">
       </div>
       <div class="col-lg-12 col-md-11 col-sm-11">
            <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
             <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
        </div>
</div>
<div class="profil_dernier col-lg-2 col-md-2 col-sm-2">
      <div class="image-point col-lg-2 col-md-9 col-sm-11">
             <img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu1">
       </div>
       <div class="col-lg-12 col-md-11 col-sm-11">
            <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
             <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
        </div>
</div>




Avec le CSS de la classe profil : 


.profil {
margin-right:31px; 
}




Mais c'est bizarre, il me manque au moins un px ou 2 sur le margin-right pour que se soit bien aligné avec le caroussel Smiley ohwell
Bonjour
En résumé pour déchiffrer l information utile : problème sur framework Bootstrap v3.3.1 avec grid responsive fixed pour col-sm-? dans fichier boot3.css sur les sélecteurs de type class de nom .profil ( ligne 291) et .read ( ligne 307 ).

A) problème profil ( a vérifier)
les sélecteur de type class "profil" et "col-sm-2" sont dans le même div. Lorsque cols-m-2 est actif ( 5 têtes sur une ligne ) le sélecteur profil ne l 'est pas !!

pour être plus précis , le sélecteur profil est actif mais en fait lorsque col-sm-2 est actif pour @media (min-width: 768px); le sélecteur profil est actif pour le contexte @media (max-width: 992px) and (min-width: 786px).

il faut overrider les sélecteurs
pour éliminer l'espace entre les têtes il faut .profil margin-right: -9px; ( valide en css; à vérifier)
Ceci entraine que tout les éléments sont alignés sur la gauche !! il faut alors ??augmenter le width de col-sm-2 pour 5 images sur 100% soit 20% .col-sm-2 {20%} ???
ou mettre marge a gauche du 1er element et une marge a droite du dernier élément ( pseudo element :first :last ? calc() , marge auto 0 ,?)


override possible a 2 niveau
@media { selcteur{ redefini}
spécificité body .col-sm-2 [0,0,1,1] > .col-sm-2 [0,0,1,0]


Quelques remarques
0) le decalage est de 15 px padding rigth/left soit 30 px ( selon le contexte ?) et est défini au niveau global par le framework bootstrap ( col-sm-2, col-sm-11 et à mon avis pour tous les col-sm-* de ce contexte ) .C'est ce padding ( marge interne) qu il faut réduire mais comment ( padding ou marging ?)

1) Si un layout utilise un grid basé sur @media , alors le sélecteur à plusieurs contextes : en dehors du @media ( unique indépendant du navigateur) et à l'intérieur du média ( plusieurs selon les cas: définis dans css mais actif ou non selon la largeur du navigateur)

2) Je n arrive pas a obtenir une largeur de bande entre les têtes de la même largeur que vous !! Il doit y avoir dans votre page de travail une différence par rapport à la page de démo . Posez vos questions alors par rapport a la page de démo pas celui de votre site ( capture ) .

3) un % a aussi un contexte qu il faut préciser. 82% est fixe mais le navigateur n'affichera qu'après conversion en pixel qui dépend de la largeur du navigateur . Seul la largeur des images est fixe ici . Enfin avec bootstrap on est en float left( pas de flexbox http://ptb2.me/flexgrid/ ) et box-sizing:border-box ( la pratique courante d'après Raphael dans un post ). Dans ma réponse j aborde le problème sans dire a quel contexte s'applique le sélecteur ....à vous de tester . Un changement dans un css entraîne parfois d ' autres modifications . ....à vérifier / tester

upload/48731-alsa-souci.png

B) a faire alignement 5 tête avec le carroussel

Cdt
Modifié par 75lionel (10 Feb 2015 - 11:04)
Sujet clos
Aller à