Bootstrap网格方案垂直对齐两个col-md＆＃39; s

Question

如何在引导网格中水平对齐元素？在下面的例子中，我有一个col-md-4和另一个col-md-8，我想要的是垂直对齐中间的那两个col-md，如下图所示。 的 here is a small fiddle:

这是html：

<div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"/>
                </div>
                <div class="col-md-8">
                    <ul class="nav nav-pills text-center">
                        <li class="active"><a href="#">text1o</a></li>
                        <li><a href="#">Text2</a></li>
                        <li><a href="#">Text3</a></li>
                        <li><a href="#">Text4</a></li>
                        <li><a href="#">Text5</a></li>
                    </ul>
                </div>
            </div>
        </div>

Answer 1

试试这个

comp/Resources

Answer 2

试试这个：

<div class="row">
    <div class="col-md-4 outbox">

.outbox {height：200px; display：inline-flex;}

.nav-pills {border-top：1px solid＃428BCA; border-bottom：1px solid＃428BCA; margin：auto 0;}