Twitter Bootstrap - bordures

Question

Twitter Bootstrap - bordures

Demandé el 9 de Janvier, 2012: Quand la question a-t-elle été
80875 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je viens de commencer à utiliser Twitter Bootstrap, et j'ai une question sur la meilleure façon d'ajouter une bordure à un élément parent ?

par exemple, si j'ai

 <div class="main-area span12">
    <div class="row">
       <div class="span9">
            //Maybe some description text
       </div>
       <div class="span3">
            //Maybe a button or something
       </div>
    </div>
 </div>

Si j'applique une bordure comme ceci :

.main-area {
    border: 1px solid #ccc;
}

Le système de grille va se briser et donner un coup de pied span3 à la ligne suivante à cause de la largeur ajoutée de la bordure......Est-ce qu'il y a un bon moyen de pouvoir ajouter des choses comme des bordures ou du rembourrage au parent <div> comme ça ?

Demandé el 9 de Janvier, 2012 par Logan W

Answer 1

2 Réponses

Answer 2

58voto

rjb Points 5050

Si vous regardez les propres données de Twitter conteneur-app.html sur GitHub, vous aurez quelques idées sur l'utilisation des bordures avec leur grille.

Par exemple, voici la partie extraite des éléments constitutifs de leur système de grille à 16 colonnes de 940 pixels de large :

.row {
    zoom: 1;
    margin-left: -20px;
}

.row > [class*="span"] {
    display: inline;
    float: left;
    margin-left: 20px;
}

.span4 {
    width: 220px;
}

Pour tenir compte des bordures sur des éléments spécifiques, ils ont ajouté un CSS intégré à la page qui réduit les classes correspondantes d'un montant suffisant pour tenir compte de la ou des bordures.

Screenshot of Example Page

Par exemple, pour permettre la présence d'une bordure gauche sur la barre latérale, ils ont ajouté cette CSS dans le fichier <head> après le principal <link href="../bootstrap.css" rel="stylesheet"> .

.content .span4 {
    margin-left: 0;
    padding-left: 19px;
    border-left: 1px solid #eee;
}

Vous verrez qu'ils ont réduit padding-left par 1px pour permettre l'ajout de la nouvelle bordure gauche. Comme cette règle apparaît plus tard dans l'ordre des sources, elle remplace toute déclaration antérieure ou externe.

Je dirais que ce n'est pas exactement le plus robuste ou approche élégante, mais elle illustre l'exemple le plus élémentaire.

Répondu el 9 de Janvier, 2012 par rjb (5050 Points )

Answer 3

47voto

Kato Points 12210

Une autre solution que j'ai rencontrée ce soir, et qui répondait à mes besoins, consistait à ajouter box-sizing attributs :

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Ces attributs forcent la bordure à faire partie de la largeur et de la hauteur du modèle de boîte et corrigent également le problème.

Selon caniuse.com " taille des boîtes , box-sizing est pris en charge dans IE8+.

Si vous utilisez LESS ou Sass, il existe un mixin Bootstrap pour cela.

MOINS :

.box-sizing(border-box);

Sass :

@include box-sizing(border-box);

Répondu el 28 de Mai, 2012 par Kato (12210 Points )

Twitter Bootstrap - bordures

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Twitter Bootstrap - bordures

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: