我知道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 – Ajax, EJS, node.js, MongoDB – </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 – 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 – Bootstrap, responsive, jQuery</h4>
</div>
<div class="col-md-4">
<a href="https://individualinvestor.myleggmason.com/portal/server.pt?open=514&objID=77504&mode=2&in_hi_userid=355661&cached=true">
<img class="img-responsive" src="img/esg.png" alt="ESG">
</a>
<h4>Legg Mason-ESG Feature – 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 – 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 – HTML5 audio, Adaptive</h4>
</div>
</div>
</div>