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

时间:2016-05-02 06:47:35

标签: css twitter-bootstrap

无论我的徽标大小是什么,我都想为#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类list-inline

在我的代码中给出了:

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

2 个答案:

答案 0 :(得分:3)

只需添加display:flex;你想要拥有相同高度的父div的风格.flexbox将负责其余的事情..

答案 1 :(得分:0)

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

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