html - 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 的更多信息