基于父引导程序调整大小的类似 Div答案

【问题标题】：Similar Div resized based on parent bootstrap基于父引导程序调整大小的类似 Div
【发布时间】：2020-01-05 20:06:15
【问题描述】：

我正在尝试确定是否有可能创建一个可以根据父需求调整的组件，无论是通过引导程序还是通过正常的 flex/css 网格。想了解可重用性因素是什么？

我有一个带有图像和一些文本的组件，我正在尝试基于引导实用程序重用它

示例代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row no-gutters text-white dy-fixed-height-content mt-4">
  <div class="col-lg-6">
    <div class="bg-dark p2 flex-fill">
      <div class="card__image"><img src="https://placeimg.com/640/480/any"></div>
      <div class="card__title">
        <a target="_blank" href="" class="card__title--link">Big item here</a>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="d-inline-flex flex-wrap flex-fill align-content-stretch">
      <div class="bg-dark p2 flex-fill">
        <div class="card__image"><img src="https://placeimg.com/640/480/any"></div>
        <div class="card__title">
          <a target="_blank" href="" class="card__title--link">Small item here</a>
        </div>
      </div>
      <div class="bg-dark p2 flex-fill">
        <div class="card__image"><img src="https://placeimg.com/640/480/any"></div>
        <div class="card__title">
          <a target="_blank" href="" class="card__title--link">Item here 2</a>
        </div>
      </div>
      <div class="bg-dark p2 flex-fill">
        <div class="card__image"><img src="https://placeimg.com/640/480/any"></div>
        <div class="card__title">
          <a target="_blank" href="" class="card__title--link">Item here 3</a>
        </div>
      </div>
      <div class="bg-dark p2 flex-fill">
        <div class="card__image"><img src="https://placeimg.com/640/480/any"></div>
        <div class="card__title">
          <a target="_blank" href="" class="card__title--link">example here</a>
        </div>
      </div>
    </div>
  </div>
</div>

我想达到什么目的：

【问题讨论】：

你有什么结构限制吗？一些简单的 CSS 示例：jsfiddle.net/L9wa6po7
有一块瓷砖，我希望那一块瓷砖适合不同的结构。根据这个例子，有一张卡片，上面有一张图片和文字。 @DaniP 我认为您的示例已将其替换为完全不同的结构
内容无关紧要，在每辆车内更换它们很容易，但基本上是相同的结构，你有 1 个大容器 > 2 列容器 > 这些列内的卡片数
这里有一个更复杂的例子：jsfiddle.net/L9wa6po7/3

标签： html css bootstrap-4

【解决方案1】：

这应该非常简单，使用 flex 的纯 css，使用相同的结构，少一个容器来存放小容器和自定义类名：

.row {
  display: flex;
  align-items: stretch;
  justify-content: center
}

.column {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px dotted black;
}

.card a {
  padding: 10px;
  display: block;
}

.card img {
  max-width: 100%;
}

.column.multiple .card {
  box-sizing: border-box;
  flex-basis: 50%;
}

<div class="row">
  <div class="column">
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Big item here</a>
    </div>
  </div>
  <div class="column multiple">
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
    <div class="card">
      <img src="https://placeimg.com/640/480/any">
      <a target="_blank" href="">Small item here</a>
    </div>
  </div>
</div>

【讨论】：