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

问题描述 投票：0回答：3

我正在尝试通过Bootstrap 4实现下图中显示的外观。我实现的部分是我想要的，因为点之间的垂直距离太大。

enter image description here

我先尝试套叠cols，然后使用负边距，但这无助于使圆垂直地相互靠近。甚至有可能使cols“重叠”，还是我必须找到另一种方法来实现所需的外观？

.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>
html css bootstrap-4
3个回答
0
投票

使用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>
0
投票

<!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>
0
投票

您可以通过Bootstrap4预定义的类来实现。取一个div并定义class="d-flex justify-content-center align-items-center"，并在此div内再取两个[div] div与class="col-5 px-0"，因此在left side div中定义circle div 1,3,5和right side div定义circle div 2,4，对于.circle定义width:100%，height:0，因此高度将自动等于padding-top: 50%和padding-bottom: 50%之类的填充技术的宽度，因此从该技术到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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.