Bootstrap列崩溃

时间:2014-12-17 22:16:28

标签: twitter-bootstrap-3

我知道bootstrap 3有一个12列的网格系统。我的理解是,超过12列的任何东西都应该堆叠在下一行。为什么我的列在顶部堆叠3个图像,在中间堆叠2个图像,在底部堆叠1个?

这是我的代码和链接。如果您调整浏览器宽度,您可以看到:

<div id="Portfolio" class="container">
    <div class="row">
        <div class="col-md-4">
            <a href="http://www.gizmoticket.jitsu.com">
                <img class="img-responsive" src="img/gizmo.png" alt="Gizmo Ticket">
            </a>
            <h4>Gizmo Ticket System &#8211; Ajax, EJS, node.js, MongoDB &#8211; </h4>
        </div>      

        <div class="col-md-4">
            <a href="http://www.spataforeguitar.com">
                <img class="img-responsive" src="img/guitar.png" alt="Spatafore Guitar">    
            </a>
            <h4>Spatafore Guitar Instruction &#8211; HTML5, responsive, jQuery</h4>
        </div>

        <div class="col-md-4">
            <a href="http://lyfia.freeiz.com/index.php">
                <img class="img-responsive" src="img/lyfia.png" alt="Lyfia Massage">
            </a>
            <h4>Lyfia Massage Therapy &#8211; Bootstrap, responsive, jQuery</h4>
        </div>

        <div class="col-md-4">
            <a href="https://individualinvestor.myleggmason.com/portal/server.pt?open=514&amp;objID=77504&amp;mode=2&amp;in_hi_userid=355661&amp;cached=true">
                <img class="img-responsive" src="img/esg.png" alt="ESG">
            </a>
            <h4>Legg Mason-ESG Feature &#8211; jQuery, Amazing Slider</h4>
        </div>

        <div class="col-md-4">
            <a href="http://www.leggmason.co.uk/income/">
                <img class="img-responsive" src="img/income.png" alt="Income Campaign">
            </a>
            <h4>Legg Mason-Income Feature &#8211; jQuery, Amazing Slider</h4>
        </div>

        <div class="col-md-4">
            <a href="https://dl.dropboxusercontent.com/u/92838694/Final%20Project/mage.html">
                <img class="img-responsive" src="img/warcraft.png" alt="Warcraft">
            </a>
            <h4>School Project &#8211; HTML5 audio, Adaptive</h4>
        </div>
    </div>
</div>

0 个答案:

没有答案