引导程序在左侧获得额外的余量以获得跨度

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格 你说对了？ ：）