Twitter bootstrap：如何添加边距？答案

【问题标题】：Twitter bootstrap: how to add side margins?Twitter bootstrap：如何添加边距？
【发布时间】：2012-06-24 06:24:58
【问题描述】：

我有一个居中的 Twitter Bootstrap 容器页面。

这个容器有一个跨越整个宽度 (span12) 的标题，标题下方是一个图片库，它是一堆行，每行有 4 个单元格（包含图片）。

我想为每一行添加侧边距，以便第一张和最后一张图片与容器边框不完全贴合，并且图片间距相等。我不想使用 offset1 作为边距，因为它太大了。

这是当前模型的链接：http://i46.tinypic.com/21e2h4o.jpg

【问题讨论】：

你能在 jsfiddle.net 上发布一个带有你的标记或模型图片的演示吗？我发现很难想象你想要什么。
我在原始帖子中包含了一个样机链接。谢谢
你试过流体类吗？容器流体行流体

标签： layout twitter twitter-bootstrap

【解决方案1】：

您可以使用 nth-child css 属性

nth-child(4n+1) 表示左边距

nth-child(4n+4) 表示右边距

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

或者

在您的.span12 中添加<div> 和style="padding:0 19px"

并在<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>

【讨论】：

我应该提到我知道如何使用 jQuery 和 CSS3 选择器来设置边距。但是这种方法会干扰 Twitter Bootstrap 排列单元格的自然方式，我将不得不根据媒体的大小调整边距。所以，我一直在寻找一种方法来使用 Twitter Bootstrap 配置来做到这一点。
使用像素来设置内边距或边距并不是一个好主意。
@JGEstiot FYI 2012 = Bootstrap 2

【解决方案2】：

span12 的宽度为 940 像素。那应该是您的工作区的宽度或其他任何东西。 960px 似乎是网格系统中相当普遍的做法。

这是我的解决方案...

<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>

【讨论】：