Bootstrap 中元素的位置答案

【问题标题】：Position of elements in BootstrapBootstrap 中元素的位置
【发布时间】：2019-05-22 16:32:14
【问题描述】：

我有 7 张图片。我需要在一行中看到 5 张图像，在中间下方的另一行中再看到 2 张图像。我连续制作了 5 张图像，但我无法将其他 2 张图像定位在下方的中心。此外，在responsive 版本中，我需要彼此下方的 2 个图像和中心的 1 个图像，并且它们需要具有边框半径：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 的决定，请告诉我如何操作。

【问题讨论】：

标签： html css bootstrap-4 responsive

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用 flex，例如将宽度设置为 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>

【讨论】：