html - Bootstrap中元素的位置

Question

我有 7 张图片。我需要在一行中查看 5 张图像，在中心下方的另一行中再查看 2 张图像。我连续制作了 5 张图片，但我无法将其他 2 张图片放在下方的中央。此外，在 responsive 版本中，我需要 2 张图像彼此下方和 1 张图像在中心并且它们需要具有 border-radius:100%，但它不起作用。我的代码有什么问题？ 这是 html:

@media all and (max-width: 1024px) {
  .ring {
    border-radius: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.1s" style="border-radius: 0;">
        <img src="img/1.jpg" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.3s" style="border-radius: 0;">
        <img src="img/2.jpg" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6 hightechxl">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.5s" style="border-radius: 0;">
        <img src="img/1.jpg" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.7s" style="border-radius: 0;">
        <img src="img/2.png" style="border-radius: 100%;">
      </div>
    </div>
    <div class="col-sm col-6">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="0.9s" style="border-radius: 0;">
        <img src="img/1.png" style="border-radius: 100%;">
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="1.1s" style="border-radius: 0;">
        <img src="img/2.png" style="border-radius: 100%; width: 150px; height: 150px;">
      </div>
    </div>
    <div class="col-sm">
      <div class="single-specials text-center wow fadeInUp" data-wow-delay="1.3s" style="border-radius: 0;">
        <img src="img/1.png" style="border-radius: 100%;">
      </div>
    </div>
  </div>
</div>

我正在使用 bootstrap4，如果没有 bootstrap 还有其他决定，请告诉我如何做。

Answer 1

我只是为您演示代码:https://codepen.io/tien-bui/pen/mamemO

所以Bootstrap的基本思想是每一行有12个col，所以如果你想在1行显示5个item你需要设置col前缀为2。例如:target small screen col-sm-2, target大屏幕 col-lg-2。并且你需要针对所有的设备来实现响应，它看起来像这样:

<div class="col-lg-2 col-md-2 col-sm-6 col-6"></div>