Ausrichten von Elementen ohne Polsterung

Question

Ich versuche eine perfekt ausgerichtete Tabelle mit divs zu erreichen. Bisher ist es das, was ich habe:

Ich suche den Zeitabschnitt auf der linken Seite der gesamten Reihe haben, aber der Text rechts ausgerichtet wie so schafft Raum Unterschiede zu stoppen:

ich habe versucht, mit text-align: right; und direction: rtl und spielen etwa mit mehr divs, aber nichts scheint bisher zu funktionieren.

Relevante html:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="header"> 
      <h1>EVENTS SCHEDULE</h1> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-2"></div> 

     <div class="col-lg-8 date"> 
      <h4>Thursday, January 26th</h4> 
     </div> 

     <div class="col-lg-2"></div> 
    </div> 

    <div class="row"> 
     <div class="col-lg-2"></div> 

     <div class="col-lg-8 event"> 
      <span class="event-time"> 1:00 PM</span> 

      <h5 class="event-title">Special Olympics Unified Snowboarding Final</h5> 
      <dd>SLOPESTYLE</dd> 
     </div> 

     <div class="col-lg-2"></div> 
    </div> 

Relevante CSS:

.date { 
    background: rgba(26, 26, 26, 1); 
    color: #fff; 
    padding-left: 20px; 
} 

.event { 
    color: #fff; 
    background: rgba(0, 0, 0, 0.4); 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.event-time { 
    font-size: 20px; 
    font-family: "Arial", Arial, sans-serif; 
    direction: rtl; 
} 

.event-title { 
    text-align: left; 
    line-height: .5em; 
    font-size: 20px; 
    font-family: "Arial", Arial, sans-serif; 
    display: inline-block; 
    padding-left: 80px; 
} 

.event dd { 
    display: block; 
    font-size: 12px; 
    font-family: "Verdana", Verdana, sans-serif; 
    padding-left: 150px; 
} 

Answer 1

Da Sie Bootstrap-Klassen verwenden, können Sie wollen, da die Größe des Bildschirms unteren Klassen für Ihre Ausrichtung versuchen Sie anzeigen darf sich nicht groß treffen.

ersetzen col-lg-8 mit col-SM- oder col-MD- so Ihre HTML

<div class="col-md-8 date"> 
     <h4>Thursday, January 26th</h4> 
    </div> 

    <div class="col-md-2"></div>