时间戳

首页 > 解决方案 > 使用引导程序时，为什么我的 div 不在父行中居中？

html - 使用引导程序时，为什么我的 div 不在父行中居中？

问题描述

所以我试图通过在父级myCol上使用align-items-center我的绿色 div 垂直row居中，但它没有居中，我不知道为什么。

为什么它会这样？

.myRow {
    height: 30vh;
    border: orange dotted 2px;
}

.myCell {
    width: 100px;
    height: 100px;
    background: green;
    border: blue dotted 3px;
}
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
        <div class="container">

            <div class="row align-items-center myRow">
                <div class="col-3 myCell">

                </div>
            </div>

            <div class="row myRow">
                <div class="col-4 myCell">

                </div>

            </div>

        </div>

标签： htmlcsstwitter-bootstrap

解决方案

您的代码的问题是您使用的是 Bootstrap 版本 2，而您应该使用的是 Bootstrap 版本 4。

只需替换引导脚本和 css 文件的链接，它应该可以工作。

推荐阅读