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

我只是刚开始使用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

评论
若相惜
若相惜

You have extra </div> tags on the 2nd and 3rd cards. Try this:

<div id="posts">
<div id="content" class="container">
    <div class="row">


        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <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 class="col-md-6 col-lg-4 col-lx-4 card">
                <a href="pages/01_25_18.html">
                    <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
                    <div class="card-body">
                    <h5 class="card-title">Oct. 28, 2016</h5>
                    </div>
                </a>
        </div>

        <div class="col-md-6 col-lg-4 col-lx-4 card">
                <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">Oct. 28, 2016</h5>
                    </div>
                </a>
        </div>
      </div>
   </div>
</div>
点赞
评论
逗妇乳
逗妇乳

解?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<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="https://via.placeholder.com/300

C/O https://placeholder.com/" 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/01_25_18.html">
                        <img class="card-img-top" src="https://via.placeholder.com/300

C/O https://placeholder.com/" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
           </div>
                </div>
            </div>
            <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="https://via.placeholder.com/300

C/O https://placeholder.com/" alt="...">
                        <div class="card-body"><h5 class="card-title">Jan. 25, 2018</h5>
                        </div>
                    </a>
           </div>
                </div>
</div>
            </div>
        </div>
        <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

我添加行并更正您的代码。

点赞
评论