Question

无论我的徽标大小是什么，我都想为＃div1和＃div2自动提供相同的高度。是否有特定的Bootstrap3类来完成这项工作？如果没有哪个是适用的最佳css规则？

<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类list-inline

在我的代码中给出了：

            <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将负责其余的事情..

Answer 2

只需将display: flex添加到父容器即可。检查更新fiddle。

将<div class="row">更改为<div class="row" style="display: flex">

Bootstrap 3：简单的垂直对齐2个div

2 个答案: