Twitter bootstrap: comment ajouter des marges latérales?

J'ai une page avec centrée sur Twitter Bootstrap conteneur .

Ce conteneur a un en-tête qui s'étend sur toute la largeur (span12) et au-dessous de l'en-tête est une galerie de photos, qui est un tas de lignes avec 4 cellules (contenant des images) dans chaque rangée.

Je voudrais ajouter des marges latérales de chaque ligne, de sorte que la première et la dernière image ne sont pas complètement serré avec les conteneur des frontières et les images sont espacés de manière égale. Je ne veux pas utiliser offset1 de la marge car il est trop grand.

Voici un lien vers la maquette actuelle: http://i46.tinypic.com/21e2h4o.jpg

Vous pouvez poster une démo en jsfiddle.net avec votre balisage ou une maquette de l'image? J'ai du mal à essayer de visualiser ce que c'est que ous souhaitez.
J'ai inclus un lien vers la maquette dans mon post original. Merci
avez-vous essayé le liquide de classe? conteneur de fluide de la ligne fluide

OriginalL'auteur alecswan | 2012-06-22

  1. 7

    Vous pouvez utiliser le nth-child propriété css

    nth-child(4n+1) pour la marge de gauche

    nth-child(4n+4) pour la marge de droite

    http://css-tricks.com/how-nth-child-works/

    Ou

    ajouter un <div> dans votre .span12 avec style="padding:0 19px"

    et les ajouter à l'intérieur d'un <div class="row-fluid">

    <div class="row">
  <div class="span12">
    <div style="padding:0 19px">
      <div class="row-fluid">
        <div class="span3">3</div>
        <div class="span3">3</div>
        <div class="span3">3</div>
        <div class="span3">3</div>
      </div>
    </div>
  </div>
</div>

    Je devrais avoir mentionné que je sais comment faire pour utiliser jQuery et CSS3 sélecteurs pour définir la marge. Mais cette approche interfère avec la façon naturelle de Twitter Bootstrap énonce les cellules de la ligne et je dois ajuster les marges en fonction de la taille des médias. Donc, je cherchais un moyen de le faire avec Twitter Bootstrap configurations.

    OriginalL'auteur baptme

  2. 1

    span12 est 940px de large. Que doit être la largeur de votre espace de travail ou quoi que ce soit. 960px semble être un peu de pratique courante parmi les systèmes de grille.

    Voici ma solution...

    <html>
<head>
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body {
            background-color: #CCC;
        }

        #SiteBody 
        {
            width: 960px;
            margin: 0 auto;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="SiteBody">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <h1>
                        My Page</h1>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

    OriginalL'auteur Theo