对齐元素而不使用填充

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>