在无法使用 bootstrap 的网站上复制 bootstrap 列结构

Question

我有完美的 bootstrap 代码，但是，我刚刚意识到我的问题的一部分是我们的论坛在 bootstrap 上有问题，所以它弄乱了很多其他样式还有。

有没有一种简单的方法可以通过 flex 或 display:grid 完全复制它？这个想法是桌面上的一行 4 列，~990px 以下的任何内容都是两列，将四个项目分成 2

组

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="team-icons row">
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col-lg-3 col-sm-6 col-xs-6">
    <img src="https://via.placeholder.com/300x70">
  </div>
</div>

Answer 1

试试下面的代码。这是没有 bootstrap。这将有助于解决您的问题。

.row {
  display: flex;
  flex-wrap: wrap;
}
.col{
  width: calc(100% / 4 - 30px);
  margin: 0 15px 30px;
}
img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

@media(max-width: 990px) {
  .col{
      width: calc(100% / 2 - 30px);
    }
}

<div class="team-icons row">
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
  <div class="col">
    <img src="https://via.placeholder.com/300x70">
  </div>
</div>

在无法使用 bootstrap 的网站上复制 bootstrap 列结构

Replicating bootstrap column structure on site that can't use bootstrap

html

css

css-grid

bootstrap-4