web-dev-qa-db-fra.com

twitter bootstrap box-sizing a ruiné ma mise en page

ma mise en page cassée lorsque j'ai implémenté bootstrap à mi-chemin de mon projet, corrigée avec quelques modifications css, et que j'avais commenté ceci

/**,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}*/

dans bootstrap.css, cela affectera-t-il son noyau? Je veux juste utiliser le système de grille dans mon projet ..

csstwitter-bootstraptwitter-bootstrap-3
22
Ulises Colen

Oui, ne fais pas ça. Supprimer le box-sizing: border-box ruinerait votre grille. Voir aussi: Pourquoi Bootstrap 3 est-il passé à box-sizing: border-box?

Un exemple pour montrer ce qui se passe:

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>
<br>
<div class="container nonborderbox" style="background-color:lightblue;">    
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>

Avec:

.nonborderbox *
{
-webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

Ce qui précède entraînera:

enter image description here

Avec box-sizing: border-box, la construction Gutter par remplissage sera hors du calcul de la largeur de votre colonne.

Essayez de comprendre la grille de Bootstrap et le box-sizing: border-box et de comprendre pourquoi cela ruinerait votre mise en page. Résolvez ces problèmes ou envisagez de ne pas utiliser Bootstrap du tout pour votre projet. 

10
Bass Jobsen

J'ai le même problème et bootstrap 3 détruit mes mises en page existantes et les widgets tiers. Voici quelque chose que j'ai essayé par ordre croissant de difficulté et de stabilité.

Plus facile

Coffre-fort que si vous n'utilisez pas d'autres composants d'amorçage

Ajoutez le css suivant après le chargement du css de bootstrap:

*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

.container .row *,
.container .row *:before,
.container .row *:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Ceci utilisera la taille border-box uniquement pour les éléments du système de grille. Cela ne fonctionnera pas si vous avez des widgets personnalisés dans la grille car ils auraient toujours appliqué border-box.

Approche plus ciblée

Coffre-fort que si vous n'utilisez pas d'autres composants d'amorçage

Vous pouvez également ajouter une classe col personnalisée à chaque div de colonne sur laquelle un col-*-* est déjà appliqué de la manière suivante:

<div class="container">
    <div class="row">
        <div class="col-md-3 col">Grid still works</div>
        <div class="col-md-9 col">:)</div>
    </div>
</div>

Ensuite, utilisez le css suivant:

*,
*:before,
*:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

.container .row .col,
.container .row .col:before,
.container .row .col:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Cela fonctionne bien si vous devez UNIQUEMENT utiliser le système de grille bootstrap dans votre projet. Toutefois, si vous avez l'intention d'utiliser d'autres composants d'amorçage, je ne recommande pas cette approche, car d'autres composants d'amorçage dépendraient de la définition de border-box.

Cherry-pick chaque élément contenant à réparer

Une méthode encore meilleure serait simplement de remplacer la taille de la boîte par content-box sur un élément parent spécifique pour un widget comme celui-ci:

.your-custom-widget-class *,
.your-custom-widget-class *:before,
.your-custom-widget-class *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

Cette approche offre la meilleure compatibilité en aval avec les futurs composants d'amorçage, même si elle semble fonctionner pour vous maintenant.

55
user193130

Ajoutez ceci dans votre mixin ou dans vos variables less et assurez-vous qu’il se charge après scaffolding.lessIl réinitialise la taille de la boîte bs3 et l’applique à nouveau pour des éléments spécifiques et pour tous les éléments obligatoires BS3. J'ai constaté que la plupart des dégâts causés par le dimensionnement par défaut de la boîte BS3 sont appliqués à 

a,ul,li

La magie

* {
  .box-sizing(content-box);
}
form,
div,
img,
table,
th,
tr,
td,
p,
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary,
audio,
canvas,
progress,
video,
[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="form-"],
[class^="form-"] *,
[class^="bg-"],
[class^="bg-"] *,
[class^="navbar"],
[class^="navbar"] *,
[class^="nav"],
[class^="nav"] *,
[class^="row"],
[class^="row"] * {
  .box-sizing(border-box);
}
3
Benn

J'ai utilisé une combinaison des solutions ci-dessus pour répondre à mes besoins .__ (je n'ai utilisé que le système de grille, tout le reste était déjà là)

/* *,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/


[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="row"],
[class^="row"] * {
  box-sizing:border-box;
}

La grille prenait trop de marge et de rembourrage donc j'ai remplacé tous les 

padding-right:15px;
padding-left:15px;
margin-left=-15px;
margin-right=-15px;

à (j'ai commenté les marges)

.row {
/*  margin-left: -15px;
margin-right: -15px;*/
}

et

.col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
}
0
Arun Prasad E S