Question

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

我的代码如下所示：

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

如果有人能向我解释我正在犯的错误会对你有什么帮助。谢谢

Answer 1

您不能关闭任一行中的最后一列：

SSL

Answer 2

请检查您是否错过了行的结束div（或关闭las列的div）

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

HTML Boostrap列未正确对齐

2 个答案: