Comment obtenir Bootstrap grille s'étend sur plus étroit que span1?

J'ai une de cinq colonnes de la grille. J'ai d'abord configurer de la manière suivante:

<div class="row">
    <div class="span1">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

La première colonne contient l'une des deux icônes, deux de la même largeur: 18px. span1 décide de 60px, cependant, il ya donc beaucoup d'espace perdu.

Comment dois-je déclarer une colonne qui est 18px?

Cela affecte seulement une page de mon application, de sorte qu'il n'est pas assez pour personnaliser l'ensemble de Bootstrap CSS, non?

InformationsquelleAutor Dan Gravell | 2012-12-12
  1. 3

    Vous pouvez ajouter votre propre classe:

    ...
.myspan {
    width:18px;
    margin-right:52px;
}
...

    Puis ajouter la classe à votre balise:

    <div class="row">
    <div class="myspan">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

    Ou même utiliser du css (mais c'est moins propre)

    <div class="row">
    <div class="span1" style="width:18px;margin-right:52px">...</div>
    <div class="span3">...</div>
    <div class="span1">...</div>
    <div class="span4">...</div>
    <div class="span1">...</div>
</div>

    Chaque classe contenant "span" recevrez un margin-left de 30px et être défini comme float:left donc, vous avez juste besoin de spécifier la marge de droite et de propriétés de largeur.

    C'est à cause de la [class*="span"] sélecteur de bootstrap.css

    Dans cet exemple, j'ai mis un margin-right de 52px de garder le système de grille, mais vous pouvez le modifier à 10px si vous ne voulez pas d'espace perdu.

    • Cela peut gâcher la mise en page en responsive mode. Comme la largeur de cet élément ne changera pas et les autres vont changer.
    • Le code CSS pour le "responsive mode" est dans le sensible de la feuille de style. De toute évidence, cela doit être mis à jour pour "responsive mode mise en page".
    InformationsquelleAutor Charles-Édouard Coste