Bootstrap，CSS布局設計修復

我有一個如下所示的部分的設計， 我需要使用 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>

這對我來說非常耗時，我需要盡快完成。如果有人可以幫助我解決這個問題，我將不勝感激。

uj5u.com熱心網友回復：

.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>

標籤：

上一篇：jQuery：當沒有內容加載時隱藏顯示更多按鈕

下一篇：前綴"http://"有效但實際上是""https://"