我想在Bootstrap中创建类似于img的内容。我需要一个在img

Question

如果您看代码，我已经创建了列和一个实用程序分隔符。我想自定义垂直潜水员。这是代码。

    <div class="container">
  <div class="row">

   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 border-right">
    <div class="col-lg-3 text-md-right ">Find Work</div>
    <div class="col-lg-3 text-md-right">Find Contractor</div>
    <div class="col-lg-3 text-md-right">Focus On Your Work</div>
     <div class="col-lg-3 text-md-right">Get Paid</div>
  </div>

  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <div class="col-lg-3 ">Find Contractors</div>
    <div class="col-lg-3 ">Find Contractor</div>
    <div class="col-lg-3">Focus On Your Work</div>
    <div class="col-lg-3 ">Get Paid</div>
  </div>
  </div>
</div>

Answer 1

嗯，必须对其进行优化，但是您可以为最内部的div建立填充，并在右侧或左侧面板中绝对定位一个圆，因此将其固定在每个内部div的左上角附近。这只是一个想法，必须加以解决才能使其具有响应性，等等。

Codepen demo

<div class="container">
  <div class="row">

    <div class="col-lg-6 pr-lg-1 pl-lg-0">
      <div class="text-md-right">
        <p class="font-weight-bold">Find Work</p>
        <span>
          The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
          <span>
      </div>
      <div class="text-md-right">
        <p class="font-weight-bold">Find Contractor</p>
      </div>
      <div class="text-md-right">
        <p class="font-weight-bold">Focus On Your Work</p>
      </div>
      <div class="text-md-right">
        <p class="font-weight-bold">Get Paid</p>
      </div>
    </div>

    <div class="col-lg-6 pl-lg-1 pr-lg-0 right-pane">
      <div>
        <div class="circle">
          <div></div>
        </div>
        <p class="font-weight-bold">Find Work</p>
        <span>
          The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
        </span>
      </div>
      <div>
        <div class="circle">
          <div></div>
        </div>
        <p class="font-weight-bold">Find Contractor</p>
      </div>
      <div>
        <div class="circle">
          <div></div>
        </div>
        <p class="font-weight-bold">Focus On Your Work</p>
      </div>
      <div>
        <div class="circle">
          <div></div>
        </div>
        <p class="font-weight-bold">Get Paid</p>
      </div>
    </div>
  </div>
</div>

CSS：

.container {
  background-color: lightblue;
  height: 500px;
}

.row > div > div {
  background-color: #F0F0F0;
  box-sizing: border-box;
  padding: 20px;
  height: 100px;
}

.right-pane > div {
  position: relative;
}

.circle {
  position: absolute;
  top: 20px;
  left: -16px;
  background-color: white;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 3px solid black;
}

.circle > div {
  position: absolute;
  top: 4px;
  left: 4px;
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}