html - 类似的 Div 根据父 Bootstrap 调整大小

Question

我正在尝试弄清楚是否有可能创建一个可以根据 parent 的要求进行调整的组件，无论是通过 Bootstrap 还是通过普通的 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>

我想达到什么目的:

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