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> 

LESS：

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