Question

我有一个以Twitter Bootstrap为中心的容器页面。

此容器的标题横跨整个宽度（span12），标题下方是图片库，每行包含4个单元格（包含图片）。

我想为每一行添加边距，以便第一张和最后一张图片不会与容器边框完全吻合，图片间距相等。我不想将offset1用于保证金，因为它太大了。

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

Answer 1

您可以使用nth-child css属性

左边距

nth-child(4n+1)

右边距

nth-child(4n+4)

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

或者

使用<div>

在.span12中添加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>

Answer 2

span12宽度为940px。那应该是你工作区的宽度或其他什么。 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>

Twitter bootstrap：如何添加边缘？

2 个答案: