2つのブートストラップ列の間に2つの行を追加するにはどうすればよいですか？

Question

2行を1行に追加したい。

この画像を気に入りましたか？

私は2つのcol-md-8とcol-md-4にブートストラップ分割、後。私はcol-md-3に分裂を続けcol-md-8で

<hr>タグとcol-md-9が<h4>テキストとすべてのコンテンツが含まれている含まれています。

col-md-4>col-md-12になります。この列では、どの列にも<hr>を割り付ける必要はありません。

次に、<hr>タグ付きのテキストを追加します。したがって、2つの列ではそれはまっすぐではありません。

このような私のコード：

div.hr_tinkhuyenmai{ 
 
    height: 1px; 
 
    width: 10%; 
 
    background-color: #ffa800; 
 
} 
 
div.title_tinkhuyenmai{ 
 
    font-family: tahoma; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: left; 
 
} 
 

 
div.group_title_hr{ 
 
    font-size: 20px; 
 
    font-family: roboto_regular; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: right 
 
    margin-top: 20px; 
 
} 
 

 
div.title_child_breakingnews{ 
 
    width: 10%; 
 
    float: right 
 
} 
 
div.hr_child_breakingnews{ 
 
    width: 30%; 
 
    height: 1px; 
 
    background-color: #ffa800; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid remove_padding" style="background-color: #f8f8f8;margin-top: 20px"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="col-md-8"> 
 
     <div class="title_tinkhuyenmai"> 
 
      <div class="col-md-3 hr_tinkhuyenmai"></div> 
 
      <div class="col-md-9"> 
 
      <h4>TIN KHUYẾN MÃI</h4> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="group_title_hr col-md-12"> 
 
      <div class="title_child_breakingnews text-right">TIN NỔI BẬT</div> 
 
      <div class="hr_child_breakingnews text-right"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたは画像のようなデザインにしたい場合は、この命令に従わなければなりません：

------------:------------------- ----------------- ------------------------------- 
| <hr> |  TEXT  | | Middle Div | | Text |   <hr>   | 
-------------------------------- ----------------- ------------------------------- 
      |     |      | C1 | 
      |  Image  |      | C2 | 
      --------------------      | C3 | 

コードパターン：（用ヘッダ部）

<div class="row"> 
     <div class="col-md-8"> 
      <div class="col-md-3"> 

      </div> 

      <div class="col-md-9"> 

      </div> 
     </div> 

     <div class="col-md-4"> 
      <div class="col-md-x"> 

      </div> 

      <div class="col-md-x"> 

      </div> 
     </div> 
    </div> 

あなたのコードのよう

：

<div class="container-fluid remove_padding" style="background-color: #f8f8f8;margin-top: 20px"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="col-md-8"> 
         <div class="title_tinkhuyenmai"> 
          <div class="col-md-3 hr_tinkhuyenmai"></div> 
          <div class="col-md-9"> 
           <h4>TIN KHUYẾN MÃI</h4> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div class="col-md-12"> 
          <div class="col-md-4 group_title_hr"> 
           <div>TIN NỔI BẬT</div> 
          </div> 

          <div class="col-md-7" style="margin-top: 17px; "> 
           <div class="hr_child_breakingnews text-right"></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

**は、あなたのタスクを完了できます。 ：P