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个项目，则需要将col前缀设置为2。例如：target小屏幕col-sm-2，target大屏幕col-lg-2。而且您需要定位所有设备以实现响应，它看起来像这样：

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

Answer 2

您可以使用flex，例如将width设置为18％-小于20％，它可以容纳5个项目，这将为您留出一定的利润空间。

对第二个版本使用媒体查询，并将flex-basis设置为48％。

.cont{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.item{
  flex-basis: 18%;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid black;
  height: 50px;
  margin: 5px;
}


@media all and (max-width: 1024px) {
  .item {
    flex-basis: 48%;
  }
}

<div class="cont">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

元素在Bootstrap中的位置

2 个答案: