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

Question

我刚开始使用一般的网络开发，所以我可能会错过一些超级简单的东西。我正在尝试使用 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>

这就是它的显示

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

我觉得不对劲的地方——

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

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

<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

引导网格的行加起来应该是 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>