web-dev-qa-db-fra.com

Grille Bootstrap 3 de Twitter, modification du point d'arrêt et suppression du remplissage

J'essaie de passer à la nouvelle grille boostrap 3 et je fais face à des difficultés.

  1. Comment avoir la grille pour empiler en dessous de 480px mais pas entre 480px et 768px?
  2. au-dessus de 768px, le remplissage à gauche du premier et le droit à la fin du dernier sont à l'extérieur du conteneur, mais au-dessous de 768px, il se trouve à l'intérieur du conteneur; l'apparence est donc différente car le contenu n'est plus aligné avec un conteneur qui pourrait être situé au-dessus.
  3. quand la pile de la grille reste, le rembourrage reste, mais pour moi, il devrait être à 0.

Toute aide serait la bienvenue si j’utilisais le code ci-dessous avec bootstrap 3 RC1

    <div class="container" style="background-color: purple;">
container

</div>

<div class="container">
    <div class="row">
        <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
    </div>
</div>
csstwitter-bootstrapresponsive-designlesstwitter-bootstrap-3
9
fred_

mise à jour janvier 2014

Voir aussi: https://github.com/twbs/bootstrap/issues/10203

mise à jour 21 août 2013 Depuis Twitter Bootstrap 3 RC2, la colonne * mentionnée ci-dessous a été renommée xs-col - * Il existe maintenant quatre classes de grille: xs-col- * (mobile, jamais piles), col-sm- * (tablette, piles inférieures à 768px), col-md- * (ordinateurs portables, piles inférieures à 992 px) et col-lg- * (bureau, piles inférieures à 1200px).

mettre à jourDans ma réponse précédente, j'utilise ce tableau des récents documents:

[ancienne image supprimée]

Lorsque je teste cette valeur si trouvé quelque chose de différent: </ strike>

Bootstrap 3 Grid

  • "col-xs- *" sera toujours appliqué (jamais empilé)
  • "col-sm- *" sera appliqué entre 768 et plus (992px) (piles à 767) 
  • "col-lg- *" sera appliqué entre 992 et plus (piles à 991)

Dans variables.less, vous trouverez:

// Media queries breakpoints
// --------------------------------------------------

// Tiny screen / phone
@screen-tiny:                480px;
@screen-phone:               @screen-tiny;

// Small screen / tablet
@screen-small:               768px;
@screen-tablet:              @screen-small;

// Medium screen / desktop
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

Mais il ne semble pas y avoir de point d'arrêt à 480px (ou comme @fred_ indique que la grille manque le jeu de classes col-ts- * (minuscule à petit)). Voir aussi: https://github.com/twbs/bootstrap/issues/9746

Pour définir le point d’empilement sur 480px, vous devrez recompiler votre css. Définissez @ screen-small sur 480px; et définissez vos colonnes avec: <div style="background-color: red" class="col-sm-4"> après cela. Notez que cela va changer @ grid-float-breakpoint car il est défini comme @grid-float-breakpoint: @screen-tablet;.

Lors de l'ajout d'une ligne au conteneur, je ne trouve pas de problèmes de remplissage.

Ou essayez: http://www.bootply.com/70212 il s’empilera au-dessous de 480px en ajoutant une requête multimédia (le javascript est utilisé à des fins d’illustration uniquement).

réponse précédente

À partir de maintenant, Bootstrap de Twitter définit trois grilles: une grille minuscule pour les téléphones (<480px), une petite grille pour les tablettes (<768px) et la grille Moyenne-grande pour Destkops (> 768px). Les préfixes de classe de lignes pour ces grilles sont «.col-», «.col-sm-» et «.col-lg-». La grille moyenne-grande s'empilera sous une largeur d'écran de 768 pixels. Il en va de même pour la petite grille en dessous de 480 pixels et pour la minuscule grille.

Avec votre préfixe "col-4", la grille ne s'empilera jamais. Donc, supprimez "col-4" pour laisser votre grille s'empiler en dessous de 480px. Cela permettra également de supprimer le rembourrage car les piles sont maintenant.

Voir aussi: http://bassjobsen.weblogs.fm/migrate-your-templates-from-Twitter-bootstrap-2-x-to-Twitter-bootstrap-3/ et Rédaction de Bootstrap de Twitter avec mise à niveau v3 à l'esprit

16
Bass Jobsen

  1. Utilisez la classe .col-ts-12 pour tous les 100% divs sous 480px et placez ce code à la fin de bootstrap.css:

    @media (max-width: 480px) { 
    .col-ts-12 { float: none; }
}
4
otopic

Pour mettre en œuvre des modifications pour des périphériques très petits à petits, vous devrez inclure vos propres requêtes multimédia afin d'ajouter vos propres points d'arrêt supplémentaires.

Par exemple:

@media (max-width: 480px) { 
   .no-float {
       display:block;
       float:none;
       padding:0;
   }
}

Je ne suis pas tout à fait sûr de ce que vous essayez d’obtenir avec cela, mais c’est ainsi que vous appliqueriez des styles où la largeur de l’écran est inférieure à 480 pixels.

0
Daniel West