Bootstrap、CSS 布局设计修复

Question

我得到了如下所示的部分设计，
我需要使用 bootstrap/CSS 创建相同的内容，这是我目前尝试的方法

.content-test-section {
    padding: 10px;
}
h3.section-head-number {
    color: #5fa936;
}
.vertical-line {
    border-left: 5px solid black;
    height: 150px;
    margin: 10px;
    padding: 10px 20px;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<div class="row content-test-section">
    <div class="col-lg-6 block-div">
      <h3 class="section-head-number">01</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    <div class="col-lg-6 block-div">
      <h3 class="section-head-number">02</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
</div>

这对我来说很费时间，我需要尽快完成它。如果有人可以帮助我，我将不胜感激。

Answer 1

.content-test-section {
    padding: 10px;
}
h3.section-head-number {
    color: #5fa936;
}
.vertical-line {
    border-left: 5px solid black;
    height: 150px;
    margin: 10px;
    padding: 10px 20px;
}
.mt-70px{
 margin-top:70px;
}
.d-flex{
  display:flex;
}
.mt-5{
  margin-top:50px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <div class="d-flex flex-row">
    <div class="flex-column">
    <div class="col-lg-7 block-div">
      <h3 class="section-head-number">01</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    <div class="col-lg-7 block-div mt-5">
      <h3 class="section-head-number">03</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div class="col-lg-7 block-div mt-5">
      <h3 class="section-head-number">05</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    </div>
     <div class="flex-column">
      <div class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">02</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">04</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
      <div class="col-lg-7 block-div mt-70px">
      <h3 class="section-head-number">06</h3>
      <div class="vertical-line">
        <h4>Create Account</h4>
        <p>Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data Dummy Data</p>
      </div>
    </div>
    </div>
</div>

Bootstrap、CSS 布局设计修复

Bootstrap, CSS layout design fixing

html

css

bootstrap-4