Bootstrap 4-父项的高度大于子项的高度时，子项会自动（垂直）对齐中心

Question

当我发现此行为异常时，我正在使用引导程序4：

https://jsfiddle.net/hzse8gfd/1/

在我的小提琴中，我有一个延伸到屏幕最大高度的侧边栏，然后在侧边栏顶部有一个50px的徽标，还有一个div保留了侧边栏的其余内容。

我意识到，当我期望它像徽标段一样粘在顶部时，内容会垂直向下推/对齐父高度的中心。 只是好奇为什么这样的行为。

我正在使用Bootstrap 4

HTML：

<div id="sidebar" class="row">
    <div class="col-12 logo">
    </div>
    <div class="col-12 sidebar-content">
        <div class="row">
            <ul id="sidebar-results">
                <li>Result 1</li>
                <li>Result 2</li>
                <li>Result 3</li>
                <li>Result 4</li>
                <li>Result 5</li>
                <li>Result 6</li>
                <li>Result 7</li>
                <li>Result 8</li>
            </ul>
        </div>
    </div>
</div>

CSS：

.logo{
  width:200px;
  height:50px;
  background-color:blue;
}

#sidebar{
  height:100vh;
}

Answer 1

我发现这是因为您在单个.row两次使用了.col-12 ，而列的总数应该总计为12您的情况是： 24 。

 .logo{ width:200px; height:50px; background-color:blue; } #sidebar{ height:100vh; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="sidebar"> <!-- LOGO ROW --> <div class="row"> <div class="col-12 logo"></div> </div> <!-- RESULTS ROW --> <div class="row"> <div class="col-12 sidebar-content"> <ul id="sidebar-results"> <li>Result 1</li> <li>Result 2</li> <li>Result 3</li> <li>Result 4</li> <li>Result 5</li> <li>Result 6</li> <li>Result 7</li> <li>Result 8</li> </ul> </div> </div> </div>