如何在 Bootstrap 网格列中使 div 与上面的 div 大小相同？

Question

这是我在这里的第一个问题，温柔点，我刚开始学习这些东西:)

我正在构建一个只使用 HTML、Sass 和 bootstrap-grid.css 的练习页面（所以基本上只使用行和列，文件中不包含卡片类，我单独设置了它们的样式），我遇到了可能是非常简单的问题，让我夜不能寐。

我需要使所有 .card-text div（白色背景的）在“视觉上”与它们上方的 img 相同，但简单地调整 .card-text div 的大小或使它们绝对定位似乎并不像正确的解决方案确实会产生另一个问题，我想保留 .col- 因为容易获得 RWD 结果。 .card-text 和 .card-img div 继承了 .col- 的给定宽度，其中的图像必须保持正确的比例，并且由于 .card-img 的灰色背景与整个部分的背景相同问题仅在于 .card-text（至少在视觉上）。

.row 中的列结构如下所示：

      <div class="col-md-4">
        <div class="card">
          <div class="card-img">
            <img src="images/r1i1.jpg" alt="image">
          </div>
          <div class="card-text">
            <h6>Ebony & Ivory</h6>
            <h5>Branding</h5>
          </div>
        </div>
      </div>

以此类推（六列），本节的 scc 如下所示：

    .portfolio {
  background-color: $color-background;
  .card {
    background-color: $color-background;
    padding: 20px;
    .card-img {
      height: 300px;
      margin: 0 44px;
      overflow: hidden;
      img {
      vertical-align: bottom;
      height: 100%;
      }
    }
    .card-text {
      background-color: $color-body;
      padding-top: 29px;
      padding-bottom: 27px;
    }
    h5 {
      margin: 2px 0 0 0;
      font-weight: lighter;
      font-family: $font-decor;
      color: #737373;
      font-size: 14px;
    }
    h6 {
      font-family: $font-text;
      font-weight: bold;
      font-size: 18px;
      margin: 0;
      color: #333333;
    }
  }
  .col {
    padding-top: 45px;
  }
}

检查 div 的屏幕截图：

.card

.card-text

编辑：

最终奏效的 scss 样式：

    .portfolio {
  background-color: $color-background;
  .card {
    background-color: $color-background;
    margin: 0 44px 50px 44px;
    .card-img {
      overflow: hidden;
      img {
      vertical-align: bottom;
      width: 100%;
      }
    }
    .card-text {
      background-color: $color-body;
      padding-top: 29px;
      padding-bottom: 27px;
      h5 {
        margin: 2px 0 0 0;
        font-weight: lighter;
        font-family: $font-decor;
        color: #737373;
        font-size: 14px;
      }
      h6 {
        font-family: $font-text;
        font-weight: bold;
        font-size: 18px;
        margin: 0;
        color: #333333;
      }
    }  
  }
  .col {
    padding-top: 45px;
  }
}

所以问题是，当然，我通过将恒定高度设置为 .card-img 犯了一个致命的错误。

Answer 1

• 将您的 img 宽度设置为 100% 而不是高度。
• 从 .card 中删除填充
• 从 .card-img 中删除边距

希望有效:)

Answer 2

为card-img添加一定的宽度，然后将.card-text div移动到card-img中，并更改card-img的css样式。

我已修改您的代码并将其添加到 sn-p。

看一次。

.card {
  background-color: #fff;
  padding: 20px;
}


 .card-img {
    width: 150px;
    margin: 0 44px;
    overflow: hidden;
  }

img {
      width: 100%;
  }

.card-text {
    position: relative;
    text-align:center;
    top: -4px;
    background-color: aliceblue;
    padding-top: 29px;
    padding-bottom: 27px;
  }

 h5 {
    margin: 2px 0 0 0;
    font-weight: lighter;
    color: #737373;
    font-size: 14px;
  }
h6 {
    font-weight: bold;
    font-size: 18px;
    margin: 0;
    color: #333333;
  }
.col {
  padding-top: 45px;
}

<div class="col-md-4">
  <div class="card">
    <div class="card-img">
      <img src="https://p1.pxfuel.com/preview/844/972/952/suit-model-businessman-corporate-royalty-free-thumbnail.jpg" alt="image">
      <div class="card-text">
        <h6>Ebony & Ivory</h6>
        <h5>Branding</h5>
      </div>
    </div>
    
  </div>
</div>

图片来源：谷歌

希望这会有所帮助！

Answer 3

只需将您为.card-img 添加的相同margin: 0 44px 添加到您的.card-text 元素，然后将width: 100% 添加到这两个元素，以便它们占据其父 div 的整个宽度，您应该得到你想要的两个元素的宽度相等。

检查并运行以下代码片段，以获取上述方法的实际示例：

html, body {margin: 0px; padding: 0; width: 100%; height: 100%;}
.portfolio {
  background-color: #222;
}
.portfolio .card {
  background-color: #222;
  padding: 20px;
}
.portfolio .card .card-img {
  height: 300px;
  margin: 0 44px;
  overflow: hidden;
}
.portfolio .card .card-img img {
  vertical-align: bottom;
  height: 100%;
  width: 100%;
}
.portfolio .card .card-text {
  background-color: #333;
  padding-top: 29px;
  padding-bottom: 27px;
  width: 100%;
  margin: 0 44px;
}
.portfolio .card h5 {
  margin: 2px 0 0 0;
  font-weight: lighter;
  color: #737373;
  font-size: 14px;
}
.portfolio .card h6 {
  font-weight: bold;
  font-size: 18px;
  margin: 0;
  color: #333333;
}
.portfolio .col {
  padding-top: 45px;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<section class="portfolio">
  <div class="col-md-4">
    <div class="card">
      <div class="card-img">
        <img src="https://picsum.photos/240/360" alt="image">
      </div>
      <div class="card-text">
        <h6>Ebony & Ivory</h6>
        <h5>Branding</h5>
      </div>
    </div>
  </div>
</section>