如何使用引導程序垂直對齊不同大小的文本

Question

好吧，所以我經歷了很多嘗試，並嘗試了幾種不同的解決方案，但是我還沒有找到一種能以我想要的方式工作的解決方案，因此我尋求幫助。

這是我當前代碼的示例：

<div class="row">
  <div class="col-md-3">
    <h3>
      Operating Systems:
    </h3>
  </div>
  <div class="col-md-8">
    <ul>
      <li>Windows</li>
      <li>Linux</li>
    </ul>
  </div>
</div>

這給了我以下內容： 屏幕截圖

通過向列添加以下樣式：

<style>
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
</style>

當它展開時，它顯示了我想要的內容，並且每一列的文本都沿着頂部對齊。

問題在於，當將其調整為較小尺寸時，它會像在此處顯示的那樣顯示它，就像我希望它在硬件部分顯示的那樣。

所以這是我的問題：在兩種情況下，bootstrap是否有辦法顯示我想要的方式，還是我必須選擇其中一種？

Answer 1

嘗試將col-md-x更改為col-xs-x

Answer 2

使用媒體查詢僅將居中樣式應用於較大的寬度。 h3的邊距影響垂直對齊，因此您可能需要對其進行調整。 同樣是IMO，flexbox是更好的對齊方式...

@media (min-width:768px) {
    .flex {
        display:flex;
        align-items:center;
    }
    h3 {
        margin-top:5px;
    }
}

http://www.codeply.com/go/hR8GJDwdL1