Wie füge ich zwei Zeilen zwischen zwei Bootstrap-Spalten hinzu?

Question

Ich möchte zwei Zeilen, die ich gerade in einer Zeile hinzugefügt habe.

Gefällt mir dieses Bild.

Nachdem ich teilen Bootstrap zwei col-md-8 und col-md-4.

In col-md-8 ich weiter Kluft zu col-md-3<hr> Tag enthalten und col-md-9 enthalten <h4> Text und alle Inhalte.

In col-md-4> es wird zu col-md-12 erstellen. In diesen Spalten brauche ich die Division <hr> in keine Spalten.

Als nächstes füge ich Text mit <hr> Tag hinzu. Also, in zwei Spalten ist es nicht gerade.

Mein Code wie folgt aus:

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

Wenn Sie das Bild entwerfen möchten, müssen Sie diese Anweisung folgen:

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

-Code-Muster: (Für Kopfteil)

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

Als Ihr Code:

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

** Hier können Sie Ihre Aufgabe beenden. : P