HTML Boostrap列未正确对齐
[英]HTML Boostrap columns are not aligned properly
问题描述
因此，我试图使用HTML中的引导程序来显示图片网格（4x3）。 但是，当我检查代码时，图片的列在那里，但它们未正确对齐。 看起来像这样： 图片
我的代码如下所示：
<body>
<div class="container">
<div class="row">
<br>
<div class="col-lg-12 col-md-6"><h1><b>Storyboards</b></h1></div>
</div>
</div>
<div class="container"> <!--storyboard pages-->
<div class="row">
<div class="col-lg-3">
<img src="lc01.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc02.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc03.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
</div>
<div class="row">
<div class="col-lg-3">
<img src="lc01.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc02.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc03.jpeg" alt="test">
</div>
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
</div>
</div>
<style>
img{
width:280px;
height:420px;
border:1px solid #000000;
margin-bottom: 12px;
}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
如果有人可以向我解释我犯了什么错误，那将非常有帮助。 谢谢
2 个解决方案
解决方案1
3 已采纳 2016-07-01 15:35:27
您不会关闭任一行的最后一列：
<div class="col-lg-3">
<img src="lc04.jpeg" alt="test">
解决方案2
-1 2016-07-01 16:09:44
请检查是否错过了行的结束div（或las列的结束div）
<div class="row">
<div class="col-lg-3">
</div>
</div>
HTML列未正确对齐？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.