css - Bootstrap 3 : simple vertical align 2 divs

Question

无论我的 Logo 大小是多少，我都想自动为#div1 和#div2 提供相同的高度。是否有特定的 Bootstrap3 类来完成这项工作？如果不是，最好应用哪个 css 规则？

https://jsfiddle.net/bzq9bhop/4/

<div class="masthead">
    <!-- Logo + Titre du site -->
    <div class="row">
        <div id="div1" class="col-xs-6" style="border:solid 1px;"><img src="http://drawception.com/pub/panels/2012/12-28/MnbfrYALQj-2.png" width="250" height="150" /></div>
        <div id="div2" class="col-xs-6" style="border:solid 1px;"><h1>My website title</h1></div>
    </div>

编辑:最后我使用了这个解决方案。 http://www.bootply.com/wr4u8YOFpj

简单而优雅，只有 1 个 Bootstrap 类列表内联

我的代码给出了:

            <div class="row">
                <ul class="list-inline">
                    <li><img src="//placehold.it/150x50"></li>
                    <li><h1>My text</h1></li>
                </ul>
            </div>

Answer 1

只需添加 display:flex;到您想要具有相同高度的父 div 的样式..flexbox 将处理其余的..