Bootstrap 4 - .col 类无法正常工作 [重复]答案

【问题标题】：Bootstrap 4 - The class .col is not working propely [duplicate]Bootstrap 4 - .col 类无法正常工作 [重复]
【发布时间】：2019-04-11 14:16:46
【问题描述】：

.col-6 类无法正常工作，当屏幕尺寸低于 575 像素时，卡片会出现奇怪的外观。如何解决？

点击Run code sn-p->Full Page，调整屏幕宽度到575px以下：

.divCard{
  float:left;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mx-md-2">
    <div class="card-group col-lg-8">

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
          </a>
        </article>
      </div>

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
          </a>
        </article>
      </div>

      <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
        <article class="card">
          <a href="#">
            <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
          </a>
        </article>
      </div>

    </div>
    
    <div class="col-12 col-lg-4" style="background-color: red"></div>
  </div> 
</div>

【问题讨论】：

卡片的宽度没有设置为 100%。将 w-100 类添加到卡片中，它应该看起来不错。如果您想查看发生了什么，请为列添加边框，您将了解布局在不同屏幕尺寸上的表现。编辑：我只是注意到你在列中嵌套了列。列需要行作为容器。
@JakubMuda 你是说<article class="card w-100">？这不起作用。
这正是我的意思。您还需要修复布局。 <div class="card-group col-lg-8"> 此列应包含<div class="row"> 并且所有带有卡片的列都应放置在此行中。它应该可以解决问题。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

将 class col-lg-8 的内容包装在 row 类中。

col-*-* 具有导致问题的默认边距。

请尝试以下代码。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mx-md-2">
    <div class="card-group col-lg-8">
      <div class="row">
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-4" style="background-color: red; height:200px"></div>
  </div>
</div>

【讨论】：

实际上我不能删除这个<div class="card-group col-lg-8">，因为我需要这个在卡片的侧面添加一个div。如果我删除 card-group 类，卡片会丢失内联布局，我也需要删除 col-lg-8。但正如我所说，我无法删除它。我更新了我的 sn-p。请检查一下。
请检查@Sabrina 的编辑，如果可行，请告诉我。

【解决方案2】：

我注意到一些错误，这里是如何修复它。我将提供简化版本来说明问题所在。

根据引导程序，您需要在布局中具有以下方案。 container → row → col → row → col 等等。

您的布局有container → row → col → col，我想这就是问题所在。

另外，添加边框非常有用，因此您可以轻松查看布局及其行为方式。

我希望这能解决你的问题。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row">
      
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">1</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">2</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">3</article>
        </div>

      </div>
    </div>
  </div>
</div>

【讨论】：

运行你的例子它没有给出正确的结果
我解决了这个问题。