對齊沒有填充的元素

Question

我想實現一個使用div完美對齊的表。到目前爲止，這是我：

我期待對整個行左側的時間段，但文字右對齊停止創造像這樣的空間差異：

我使用text-align: right;和direction: rtl和播放大約有更多的div，但沒有試過似乎到目前爲止是工作。

相關的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> 

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

由於您使用的自舉類，你可能想嘗試，因爲屏幕正在顯示尺寸下層爲您對齊可能不會很大。

更換COL-LG-8 COL-SM-或COL-MD-所以你的HTML看起來像

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

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