引导卡边框消失并且网格不起作用

我只是刚开始使用Web开发人员，所以我可能会缺少一些超级简单的东西。我正在尝试使用Bootstrap卡，并已对其进行测试。我希望该卡在较大的屏幕上可容纳3行，然后转到2-col，然后随着页面尺寸的减小而变成一列。有点用前两张卡来完成，但是即使桌面上的页面全屏显示，最后一张卡也不与前两张卡在同一行。

同样，第一张卡的卡边框是正常的，而第二张卡的边框则没有。第三张卡不仅没有边框，而且卡的大小也不同。

我所有三张卡的代码几乎完全相同，但卡体文本和图像来源只有很小的差异。我也没有使用任何自定义的CSS，只有一个引导程序。

这是我的代码供参考：

<div id="posts">
    <div id="content" class="container">
        <div class="row">
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/01_25_18.html">
                        <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/10_28_16.html">
                        <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
                        </div>
                        <div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 col-lx-4">
                <div class="card mt-4">
                    <a href="pages/10_28_16.html">
                        <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
                        </div>
                        <div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

this is what it's showing up as