在Bootrap 4中，包含圆圈的列垂直重叠

Question

我正试图实现的外观显示在下面的图片‘引导4’。我的成就部分是我想要的，因为点之间的垂直距离太大了。

​

​

我首先尝试嵌套科尔，然后我使用负的‘毛边’，但它没有帮助移动垂直更接近彼此的圆圈。是否有可能使“科尔”“重叠”，或者我必须找到另一种方式来达到我想要的样子？

​

.block {
  text-align: center;
  vertical-align: middle;
}
.circle {
  background-color: darkred;
  color: white;
  border-radius: 200px;
  height: 110px;
  width: 110px;
  display: table;
  /* margin-bottom: -50px; */

}
.circle p {
  vertical-align: middle;
  display: table-cell;
}

<!--Circles-->
  <div class="row no-gutters justify-content-center">
    <div class="col-lg-3 ">
      <div class="col-lg-2 block">
        <div class="circle   ">
          <p>Circle 1</p>
        </div>
      </div>
      <div class="col-lg-1 block offset-5">
        <div class="circle  ">
          <p>Circle 2</p>
        </div>
      </div>
      <div class="col-lg-1 block ">
        <div class="circle  ">
          <p>Circle 3</p>
        </div>
      </div>
      <div class="col-lg-1 block  offset-5 ">
        <div class="circle  ">
          <p>Circle 4</p>
        </div>
      </div>
      <div class="col-lg-1 block ">
        <div class="circle  ">
          <p>Circle 5</p>
        </div>
      </div>
<!-- Text-->
    </div>
    <div class="col-lg-7 ">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.
      </p>
    </div>
  </div>

​

Answer 1

您可以通过Bootstrap4预定义类来实现。

取一个div并定义class="d-flex justify-content-center align-items-center" &在这个div内使用两个带有class="col-5 px-0"的div，因此在左侧div定义circle div 1,3,5，右侧div定义circle div 2,4，

对于.circle定义width:100%，height:0，因此高度将自动等于从填充技术(如padding-top: 50% & padding-bottom: 50% )到circle的宽度，因此从该技术到circle将响应并根据父div宽度调整大小。

​

.circle {
  background-color: #E94954;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 15px;
  height: 0;
  width: 100%;
  padding-top: 50%;
  padding-bottom: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle p{
  margin: 0;
  font-size: 90%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container my-3">
  <div class="row no-gutters justify-content-center">
    <div class="col-sm-5 col-md-4 col-lg-3">
      <div class="d-flex justify-content-center align-items-center">
        <div class="col-5 px-0">
          <div class="circle">
            <p>Circle 1</p>
          </div>
          <div class="circle">
            <p>Circle 3</p>
          </div>
          <div class="circle">
            <p>Circle 5</p>
          </div>
        </div>
        <div class="col-5 px-0">
          <div class="circle">
            <p>Circle 2</p>
          </div>
          <div class="circle">
            <p>Circle 4</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-7 col-md-8 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</div>

​

Answer 2

使用flex的一个简单想法--您也可以使用BS flex类。

​

.box {
    display: flex;
        align-items: center;
}
.containerr {
  display: flex;
  flex-direction: column;
      margin-right: 16px;
}
.holder {
  margin: 1%;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  
   background: red;
}
.holder:before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}

<div class="box">
<div class="containerr">
  <div class="holder "></div>
  <div class="holder "></div>
  <div class="holder "></div>
</div>
<div class="containerr">
  <div class="holder "></div>
  <div class="holder "></div>
</div>
</div>

​

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<style>
    .block {
    text-align: center;
    vertical-align: middle;
}
.circle {
    background-color: darkred;
    color: white;
    border-radius: 200px;
    height: 110px;
    width: 110px;
    display: table;
    margin-bottom:1vw;

}
.circle p {
    vertical-align: middle;
    display: table-cell;

}
    </style>
<body>

<!--Circles-->
    <div class="row no-gutters justify-content-center">
      <div class="col-lg-1 ">
        <div class="col-lg-2 block">
          <div class="circle">
            <p>Circle 1</p>
          </div>
        </div>

        <div class="col-lg-1 block ">
          <div class="circle  ">
            <p>Circle 3</p>
          </div>
        </div>

        <div class="col-lg-1 block ">
          <div class="circle  ">
            <p>Circle 5</p>
          </div>
        </div>
<!-- Text-->
      </div>
      <div style="margin-top: 4vw; margin-left: -2 vw;"class="col-lg-1 ">
       <div class="col-lg-1 block ">
          <div class="circle  ">
            <p>Circle 2</p>
          </div>
        </div>
 <div class="col-lg-1 block   ">
          <div class="circle  ">
            <p>Circle 4</p>
          </div>
        </div>
        </div>
      <div  class="col-lg-3 ">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua.
        </p>
      </div>
    </div>
</body>
</html>