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

好的，所以我已經嘗試了幾種不同的解決方案，但是我沒有找到一種能夠按照我希望的方式工作的方法，因此我幫助尋求幫助。如何使用引導程序將不同大小的文本垂直對齊

這裏是我當前的代碼示例：

<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>

這使我有以下幾點：screenshot

通過添加下面的樣式到欄目：

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

我明白了顯示我想要的內容，並將每列中的文本沿頂部對齊。

這個問題是，當調整到一個小尺寸時，它顯示它就像它顯示here正如我希望它顯示爲硬件部分一樣。

所以，這裏是我的問題：是否有一種方式與引導，讓它顯示我如何在這兩種情況下，或者我必須選擇一個或另一個？

來源

2017-04-12 DylanHogue

使用媒體查詢僅適用於較大的寬度居中風格。 h3的邊距影響垂直對齊，因此您可能需要調整。此外IMO，Flexbox將是一個更好的比對方法......

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

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

來源

2017-04-12 23:33:41 ZimSystem

非常感謝你，不是我需要的東西，而是讓我得到我需要的東西。如上所述，通過將高度代碼放在媒體查詢中，我能夠達到預期的效果。再次感謝。 – DylanHogue

嘗試改變COL-MD-X到COL-XS-X

來源

2017-04-12 22:48:21

感謝您的嘗試，不工作，雖然。在某些情況下，這會讓事情變得更糟。 – DylanHogue

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

回答

相關問題