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

当我发现此行为异常时，我正在使用引导程序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;
}

最佳答案

我发现这是因为您在单个.col-12中两次使用了.row，而列的总数应总计为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>