twitter-bootstrap - bootstrap 在左侧为 span 留出额外的余量

Question

我正在尝试添加 Div 和底部的 Div 在第 4 个跨度上有额外的边距。

第 4 个跨度位于底部，但未正确对齐。它的左边距比上面的要多。

这是我的代码：-

<div class="row-fluid">
    <div class=span12>
        <div class=span4>
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
        <div class="span4">
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
        <div class="span4">
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
        <div class="span4">
            <div style="background: url(img/background.jpg) center no-repeat">
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
                <h2>&nbsp;</h2>
            </div>
        </div>
    </div>
</div>

Answer 1

你需要另一个<div class="row"></div在那里，如下所示：

<div class="row-fluid">
  <div class=span12>
    <div class="row"> <!-- Additional row HERE -->
    <div class=span4>
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    </div>
  </div>
  <div class=span12>
    <div class="row">  <!-- Additional row HERE -->
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    </div>
  </div>
</div>

Answer 2

我认为解决方案是

<div class="row-fluid">
  <div class=span12>
    <div class=span4>
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>  
  </div>
  <div class=span12>
    <div class="span4">
        <div style="background: url(img/background.jpg) center no-repeat">
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
            <h2>&nbsp;</h2>
        </div>
    </div>
  </div>
</div>

这是因为你用 3 span4 完成了网格，换句话说，3*span4 = 12 那么，你需要用 span12 创建一个新的 div 容器，在这个 div 内你可以添加新的 spanN 直到完成你得到的 12 网格？:)