Bootstrap 列内容显示对齐到顶部

Question

我正在尝试将日期和时间调整为与城市名称相同的级别。请看下面的图片。蓝色路径线不是从城市名称的开头开始，因为.flight-date 元素移动到下一行。我怎样才能使date-time 元素增长到顶部而不是底部或提出任何其他解决方案我怎样才能达到类似的结果？

CodePen example

HTML：

<div class="container-fluid">
<div class="roundtrip">
  <div class="trip col-xs-5">Outbound
    <div class="flight">

              <div class="date-time col-xs-offset-4 col-xs-1">
                <div class="flight-time pull-right">12:40</div>
                <div class="flight-date pull-right">Friday 11 Sep</div>
              </div>  
              <div class="col-xs-offset-0 col-xs-2">
                Los Angeles
              </div>
    </div>
    <div class="flight-path"></div>
    <div class="flight">Chicago</div>
    <div class="connection">5hr wait</div>
    <div class="flight">Chicago</div>
    <div class="flight-path"></div>
    <div class="flight">New York</div>
    <div class="connection">2hr wait</div>
    <div class="flight">New York</div>
    <div class="flight-path"></div>
    <div class="flight">Amsterdam</div>
  </div>
  <!-- just padding: --><div class="col-xs-2"></div>
  <div class="trip col-xs-5">Inbound
    <div class="flight">Amsterdam</div>
    <div class="flight-path"></div>
    <div class="flight">Los Angeles</div>
  </div>
</div>
</div>

少：

body {padding: 2em 0 0 2em}

.roundtrip {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
}

.trip {
  //width: 100px;
  text-align: center;
  border: 1px solid black;
  //margin: 0px 3px;
  display: flex;
  flex-direction: column;
}

.flight {
  white-space: nowrap;
}

.date-time{
  vertical-align:top
}


.flight-path {
  width: 6px;
  min-height: 85px;
  flex-grow: 1;
  align-self: center;
  background-color: #6090FF;
}

.connection {
  height: 40px;
  align-self: center;

  width: 70px;
  color: red;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 1

你可以像这样使用 flexbox：

body {
    padding: 2em 0 0 2em
}
.align-bottom {  /*added*/
    display: flex;
    align-items: flex-end;
}
.roundtrip {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
}
.trip {
    //width: 100px;
    text-align: center;
    border: 1px solid black;
    //margin: 0px 3px;
    display: flex;
    flex-direction: column;
}
.flight {
    white-space: nowrap;
}
.date-time {
    text-align: center;
}
.flight-path {
    width: 6px;
    min-height: 85px;
    flex-grow: 1;
    align-self: center;
    background-color: #6090FF;
}
.connection {
    height: 40px;
    align-self: center;
    width: 70px;
    color: red;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="roundtrip">
        <div class="trip col-xs-12">Outbound
            <div class="flight align-bottom"> <!--added the class 'align-bottom'-->
                <div class="date-time col-xs-offset-2 col-xs-3">
                    <div class="flight-time">12:40</div>
                    <div class="flight-date">Friday 11 Sep</div>
                </div>
                <div class="col-xs-offset-0 col-xs-2">Los Angeles</div>
            </div>
            <div class="flight-path"></div>
            <div class="flight">Chicago</div>
            <div class="connection">5hr wait</div>
            <div class="flight">Chicago</div>
            <div class="flight-path"></div>
            <div class="flight">New York</div>
            <div class="connection">2hr wait</div>
            <div class="flight">New York</div>
            <div class="flight-path"></div>
            <div class="flight">Amsterdam</div>
        </div>
    </div>
</div>

查看这里以获取有关 flexbox 的更多信息