Bootstrap 卡片边框消失，网格不工作

Question

我刚刚开始使用一般的 Web 开发，所以我可能会遗漏一些非常简单的东西。我正在尝试使用 Bootstrap 卡，并且已经对其中的三个进行了测试。我希望卡片在较大的屏幕上适合 3 行，然后转到 2 列，然后随着页面大小的减小而转到单列。前两张卡片有点像这样，但即使桌面上的页面全屏显示，最后一张卡片也不会与前两张卡片保持在同一行。

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

我的所有三张卡片的代码几乎完全相同，只有卡片正文和图片来源略有不同。我也没有使用任何自定义 css，仅使用 bootstrap。

这是我的代码供参考：

<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

Answer 1

解决方案？

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

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

Answer 2

您在第二张和第三张卡片上有额外的 </div> 个标签。试试这个：

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

Answer 3

我觉得不对的地方-

没有col-lx-4。应该是 col-xl-4
应该是 <div class="col-md-6 col-lg-4 col-sm-12"> 而不是 <div class="col-md-6 col-lg-4 col-lx-4">，因为在大屏幕上，您需要一行 3 个项目，在中等屏幕上，您需要 2 个，在小屏幕上，您需要一个。
最后两张卡片没有边框，因为在最后两张卡片中，您在 img 之后多了一个 </div>。

总体而言，您的模板应如下所示：

<div id="posts">
  <div id="content" class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4 col-sm-12">
        <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-sm-12">
        <div class="card mt-4">
          <a href="pages/10_28_16.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>
      <div class="col-md-6 col-lg-4 col-sm-12">
        <div class="card mt-4">
          <a href="pages/10_28_16.html">
            <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
            </img>
            <div class="card-body">
              <h5 class="card-title">Oct. 28, 2016</h5>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 4

bootstrap格子的行加起来应该是12，在小机上，使用col-sm-12

Answer 5

从 BS 4.4 开始就可以使用了

https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
    </div>
  </div>

Bootstrap 卡片边框消失，网格不工作

Bootstrap card border disappeared and grid not working

html

css

bootstrap-4

bootstrap-cards