HTML Boostrap列未正确对齐

所以我试图在HTML中使用引导来显示图片网格（4x3）。但是，当我检查代码的图片列在那里，但他们没有正确对齐。它看起来像这样： Image HTML Boostrap列未正确对齐

我的代码如下所示：

<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>

如果任何人都可以向我解释我在做什么错误，这将是很有帮助。谢谢

来源

2016-07-01 Cereal

你也不行关闭你的最后一栏：

<div class="col-lg-3"> 
    <img src="lc04.jpeg" alt="test">

来源

2016-07-01 15:35:27 Turnip

我不敢相信我错过了！当你无数次查看代码时，我想你只是习惯了它，感谢你的快速回复 – Cereal

-1

请检查您是否已经错过了行结束的div（或关闭DIV拉斯维加斯列）

<div class="row"> 
    <div class="col-lg-3"> 
    </div> 
</div>

来源

2016-07-01 16:09:44 lorenag83

HTML Boostrap列未正确对齐

回答

相关问题